how to make start date and end date appear at one line for datepickerrange component.
for example, mine is the first figure, but i want it look like 2nd figure.
here is my code:
html.H4('Select a start and end date:'),
dcc.DatePickerRange(id='date-range',
min_date_allowed=datetime(2020,1,1),
max_date_allowed=datetime.today(),
start_date=start_date,
end_date=end_date,
style = {
'font-size': '6px','display': 'inline-block', 'border-radius' : '2px',
'border' : '1px solid #ccc', 'color': '#333',
'border-spacing' : '0', 'border-collapse' :'separate'
}
)
in CSS file, i also added this and it doesn't work, Thanks for help, please
.DateInput, .DateInput_1 {
width: 100%;
}
I added your code to a html.Div
import dash
from dash import dcc, html
from datetime import date, timedelta, datetime
app = dash.Dash(__name__, meta_tags=[{"name": "viewport", "content": "width=device-width"}])
app.layout = html.Div([html.H4('Select a start and end date:'),
dcc.DatePickerRange(id='date-range',
min_date_allowed=datetime(2020,1,1),
max_date_allowed=datetime.today(),
start_date=datetime(2020,1,1),
end_date=datetime(2020,1,1),
style = {
'font-size': '6px','display': 'inline-block', 'border-radius' : '2px',
'border' : '1px solid #ccc', 'color': '#333',
'border-spacing' : '0', 'border-collapse' :'separate'
} )
])
if __name__ == '__main__':
app.run_server(debug=False)
And I got it
Related
here the changes herder row BG color work for me but how we can change the BG color of the striped row.
import React from 'react';
import DataTable from 'react-data-table-component';
const tableCustomStyles = {
headRow: {
style: {
color:'#223336',
backgroundColor: '#e7eef0'
},
},
striped: {
default: 'red'
},
}
function App() {
return (
<div className="App">
<h3>DataTable in React - Clue Mediator</h3>
<DataTable
title="Employees"
columns={columns}
data={data}
pagination
highlightOnHover
striped
customStyles={tableCustomStyles}
/>
</div>
);
}
export default App;
here I used the react-data-table-component and want to change the customized BG color of the striped row.
how can we do that?
After looking through the documentation for using custom styles found here and the available fields here, it appears you need to nest the striped styles inside of a row object in the style config.
Edit for comment:
To change the order of striped and non-striped rows, you could just swap the colors of the regular rows and striped rows (i.e. set the regular row to have the striped attributes and vise-versa).
Your tableCustomStyles should look like this (for even row stripes):
const tableCustomStyles = {
headRow: {
style: {
color:'#223336',
backgroundColor: '#e7eef0'
},
},
rows: {
style: {
color: "STRIPEDCOLOR",
backgroundColor: "STRIPEDCOLOR"
},
stripedStyle: {
color: "NORMALCOLOR",
backgroundColor: "NORMALCOLOR"
}
}
}
I am trying to make one pdf page as one base64 image using react-pdf in my reactjs web application.
and I have tried everything that I know of for making the image as an A4 size
image and fill the image completely so that one image comes as one entire page in react-pdf
I have tried width:100%, height:100%, object-fill, tried to increase the size.
but so far I am unsuccessful.
Right now the image comes on center and does not make it to all the corners in the page.
import React, { Component } from 'react'
import ReactPDF, { Page, Text, View, Document, StyleSheet , Font, Image,} from '#react-pdf/renderer';
import pic from "../pics/pic.jpeg"
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#fff',
width:"100%",
orientation:"portrait"
},
image: {
width: '100%',
height:"100%",
padding: 10,
backgroundColor: 'white',
},
});
// Create Document Component
export default class ImageToPDF extends Component {
render() {
return (
<Document >
<Page object-fit="fill" style={styles.page} size="A4">
<View object-fit="fill" style={styles.image}>
<Image object-fit="fill" style={{ padding:"0, 0, 0, 0", margin:"33%, 2rem, 2rem, 2rem",
transform: 'rotate(90deg)'}} src={pic} alt="images" />
</View>
</Page>
</Document>
)
}
}
Expected output: One image comes as one page in the pdf using react-pdf.
Actual result: one image comes in the middle of a page using react-pdf and has a lot of margin on all four sides
Thanks a lot for the help. I really appreciate it
A bit late i guess, but maybe someone else can be helped by this.
I think the code below will do the trick.
I've altered a few things:
The view element had padding, i removed it.
applied objectFit to the image element, I would suggest to use "cover" instead of "fill".
Let me know if this helped.
import React, { Component } from 'react'
import ReactPDF, { Page, Text, View, Document, StyleSheet, Font, Image } from '#react-pdf/renderer';
import pic from "../pics/pic.jpeg"
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#fff',
width: '100%',
orientation: 'portrait',
},
view: {
width: '100%',
height: '100%',
padding: 0,
backgroundColor: 'white',
},
image: {
objectFit: 'cover',
},
});
// Create Document Component
export default class ImageToPDF extends Component {
render() {
return (
<Document >
<Page object-fit="fill" style={styles.page} size="A4">
<View style={styles.view}>
<Image style={styles.image} src={pic} alt="images" />
</View>
</Page>
</Document>
);
};
};
i cant change the backgroundColor of Textareafield In EXT js4.2
css
.disable-field{
background: #b5b8c8 !important;
}
Js
var remaskTextField = Ext.create('Ext.panel.Panel', {
id : 'remasksTextField',
title: 'Remark',
items: [ {
id : 'remask',
xtype : 'textareafield',
name : 'message',
width: 310,
height:230
}]
});
i tried the following code to change colour .
only the first one can change the backgroundColor but the top line of the Textareafield still remaining unchanged .
document.getElementById('remaskTextField').style.backgroundColor = "#c3c5ce";
Ext.getCmp('remask').addClass('disable-field');
Ext.getCmp('remasksTextField').addClass('disable-field');
One approach, that worked for me with ExtJS 4.2, is fieldStyle config:
fieldStyle : String
Optional CSS style(s) to be applied to the field input element. Should
be a valid argument to Ext.Element.applyStyles. Defaults to undefined.
See also the setFieldStyle method for changing the style after
initialization.
Example:
Ext.onReady(function() {
Ext.create('Ext.form.TextArea', {
renderTo: Ext.getBody(),
width: 400,
height: 400,
fieldStyle: "background: #b5b8c8 none repeat scroll 0 0 !important;"
});
});
Good afternoon, I am trying to write a SPA with React.
I get a JSON-Object from a webservice wich validates the Inputfields.
Now i want so set the Style of the Inputfield depending on the answer of the Webservice.
At example the Style shoud be:
style={{borderColor: 'green', boxShadow: '0 0 5px green',}}
when the JSONValue is 0
<Input
style = ???
...
/>
My JSON looks like this:
{
"validate": {
"isValidTest": 0
...
}
}
edit: the JSON can have three diffrent Values witch three different Styles.
This is an example of what you could do
Example 1
<Input
style =
{{borderColor: obj.validate.isValidTest === 0 ? 'red':'green'
boxShadow: `0 0 5px ${obj.validate.isValidTest === 0 ? 'red' : 'green'}`}}
...
/>
What's happening here
By utilizing the shorthand conditionals we can apply a borderColor & boxShadow to the style depending on the value of isValidTest within obj (which will be replaced by the name of your object)(!!)
Have a look at this example to see what is happening here
NOTE
Ofcourse, this could be separated from the inline style attribute by setting a className depending on the outcome of isValidTest or by applying a different style constant to it depending on the same conditional
Example 2
const errorStyles = {
borderColor: 'red',
boxShadow: '0 0 5px red'
}
const validStyles = {
borderColor: 'green',
boxShadow: '0 0 5px green'
}
<Input
style={ obj.validate.isValidTest === 0 ? errorStyles : validStyles }
/>
Again, in this sandbox both examples are shown in the same file, on the same page.
You could also have a look at this question & answer for more examples and information
EDIT
To account for more than two values in isValidTest you could go at it like so:
const errorStyles = {
borderColor: 'red',
boxShadow: '0 0 5px red'
}
const validStyles = {
borderColor: 'green',
boxShadow: '0 0 5px green'
}
const error2Styles = {
borderColor: 'magenta',
boxShadow: '0 0 5px magenta'
}
const valid2Styles = {
borderColor: 'yellow',
boxShadow: '0 0 5px yellow'
}
isValid = (valid) => {
switch(valid) {
case -1:
return errorStyles
break;
case 0:
return error2Styles
break;
case 1:
return validStyles
break;
case 2:
return valid2Styles
break;
}
}
<Input
style={this.isValid(obj.validate.isValidTest)}
/>
What happens in the above example
As seen above the style attribute refers to this.isValid which in turn return a const containing the styles, supplied to this function is the isValidTest property from your obj.validate.
I have updated the sandbox to include the above example
Hope this helps!
I noticed this website has a list of checkboxes, but when I look at the HTML I just see div's with CSS classes on them.
How do you create checkboxes and check them off just by using CSS?
What is the benefit of doing it via CSS?
You certainly can. The advantage is that it gives you way more flexibility. For example, here's a basic React component that uses divs for the checkbox:
https://jsbin.com/xarewiweza/1/edit?html,js,output
const styles = {
outer: {
borderRadius: 5,
border: '2px solid gray',
width: 30,
height: 30,
cursor: 'pointer',
},
inner: checked => ({
borderRadius: '50%',
height: 28,
width: 28,
backgroundColor: checked ? 'red' : 'transparent',
margin: 1,
transition: 'background-color 0.2s ease',
})
}
class Checkbox extends React.Component {
constructor(props) {
super(props)
this.state = {
checked: false,
}
}
render() {
console.log(this.state)
return (
<div
onClick={() => this.setState({ checked: !this.state.checked, })}
style={styles.outer}>
<div style={styles.inner(this.state.checked)} />
</div>
)
}
}
ReactDOM.render(<Checkbox />, document.body)
If you wanted animated checkmarks, or other cool stuff, you'd have to go custom.
The disadvantage is that you don't get some of the default HTML functionality, though I'm not sure if there is anything useful with the checkbox specifically. For example, with the default select on iOS, it automatically uses the carousel selecter, which is a handy feature.