I am using this component: react select.
This is my situation:
screenshot
When I add more and more tags in such a way that they don't fit inside the select component anymore - you can see position of other components (which are located next to react select) like the black "X" button are not updated, e.g. the "X" component should move to the right since width of react-select has increased. However, it doesn't. Can someone tell me what is wrong?
This is how those components (each row) is created:
<div style={{ display: "flex", verticalAlign: "middle" }}>
<Checkbox style={{ marginTop: 9, width: 40 }} checked={data.checked}
onCheck={(e, value) => { this.updateTreeNodeCheckedById(data.id, value);}} />
<Select value={data.value} simpleValue placeholder={data.label} multi
style={{marginTop:"5px", width: "300px", maxWidth:"300px"}}
onChange={(value)=>{ this.updateTreeNodeValueById(data.id, value)}}
options={[
{value:0, label:"სატესტო1"},
{value:1, label:"სატესტო2"},
{value:2, label:"სატესტო3"},
{value:3, label:"სატესტო4"}
]} />
<IconButton onClick={() => { this.deleteTreeNode(data.id)}}>
<ClearBtn />
</IconButton>
</div>
Related
I have a multi-select MUI element, and when I select multiple items on a small screen, the elements make the parent larger, so you would have to scroll to the right to view everything.
How can I fixe this?
<Box
display={"flex"}
flexDirection={"column"}
rowGap={3}
sx={{
mb: 1,
px: 2,
}}
>
<FormControl>
<InputLabel id="simple-select-label">
Job completed by
</InputLabel>
<Select
label="Job completed by"
name="employeeID"
multiple={true}
id="simple-select"
sx={{
}}
required
value={values.employeeID}
onChange={(e) => {
setValues({
...values,
employeeID: e.target.value,
})
}}
>
{employeesLists?.map((employee) => (
<MenuItem value={employee.id} key={employee.id}>
{employee.firstName} {employee.lastName}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
To fix this, I had to use the override nested component strategy: https://mui.com/material-ui/customization/how-to-customize/#1-one-off-customization
I added this to fix the problem, to override the default styles. It can be placed on <Select>.
sx={{
'& #simple-select': {
whiteSpace: 'normal',
},
}}
``
I have a component that is passed as a label prop. I need to add width: 100% for it because otherwise, I cannot use justify-content: space between for my div. Here is how it looks like in developer tools.
return (
<div className={classes.row}>
<Checkbox
value={deviceId}
className={classes.checkbox}
checked={Boolean(selected)}
onChange={handleToggle}
label={
<div>
<Tooltip title={t('integrations.deviceEUI')} placement={'top-start'}>
<Typography variant="body1" className={classes.item}>
{deviceEui}
</Typography>
</Tooltip>
<Tooltip title={t('integrations.deviceName')} placement={'top-start'}>
<Typography variant="body1" className={classes.item}>
{name || ''}
</Typography>
</Tooltip>
</div>
}
/>
</div>
);
};
I'm not sure I fully understand the issue, but if you want to simply add styles to a React component, you can simply do the following:
cont labelStyle = {
width: '100%'
};
Then inside your return statement, you could attach this labelStyle to the parent <div> like so:
<div style={labelStyle}>
//other components
</div>
If this isn't what you really mean, then please consider outlining the issue a little more clearly, thanks!
In React Native version of this problem, you can simply give the "style" prop to the component as:
const NewComponent = ({style}) => {}
and now you are able to reach to the "style" prop from another file.
Now, "style" prop is available to use in "NewComponent", write the following code:
<NewComponent style={{}}/>
I am using react-native-autocomplete-input component's <AutoComplete>
I inserted two icons at left(search) and right(close) of AutoComplete.
<View style={styles.searchSection}>
<AntDesign
name="search1"
size={18}
color="gray"
style={styles.searchIcon}
/>
<Autocomplete
autoCapitalize="none"
autoCorrect={false}
containerStyle={styles.autocompleteContainer}
inputContainerStyle={styles.inputContainer}
//data to show in suggestion
data={filteredFilms}
//default value if you want to set something in input
defaultValue={
JSON.stringify(selectedValue) === '{}'
? ''
: selectedValue.title + selectedValue.id
}
// onchange of the text changing the state of the query
// which will trigger the findFilm method
// to show the suggestions
onChangeText={(text) => findFilm(text)}
placeholder="Search doctors, specialities, symptoms"
renderItem={({item}) => (
//you can change the view you want to show in suggestions
<View style={{backgroundColor: 'red', flexDirection: 'column'}}>
<TouchableOpacity
onPress={() => {
setSelectedValue(item);
setFilteredFilms([]);
}}>
<Text style={styles.itemText}>{item.title + item.id}</Text>
</TouchableOpacity>
</View>
)}
/>
<AntDesign
name="close"
size={18}
color="gray"
style={styles.clearIcon}
/>
</View>
Without typing keys, UI looks fine as below:
But when I start to type, both search and close icons are pushed down to center of suggestion:
Any suggestion, how I can keep both icons fixed at it's top position.
Please help.
Please try attribute alignItems:'flex-start' in styles.searchSection.
For further alignment of icons, use padingTop: 10 in both searchIcon and clearIcon.
I'm using a material UI library in a React project using react typescript. I want this button to have a picture as a background. However, the button does not accept src or imageURL and returns a typescript error and the css style background doesn't show the picture either. this is my code:
const noticon = require ('./../../images/nicon.png')
const Avatarpic = require ('./../../images/Avatar.png')
const ExampleButton = ({
// useOpenState hook handlers
handleToggle, handleClose, handleOpen, setOpenState, isOpen
}: DropdownButtonProps) => (
<Button onClick={handleToggle} style={{backgroundImage: '{noticon}'}} square>
</Button>
)
function Navbar () {
return (
<>
<TopBar style={{ backgroundColor: '#e6edec' }}>
<TopBarSection>
<TopBarTitle>
<Avatar imgUrl={Avatarpic} name='حسین ساداتی پور' style={{ fontFamily: 'IranSans', fontSize: '20px' }} />
</TopBarTitle>
<Dropdown ButtonComponent={ExampleButton}>
<DropdownItem>Item to click</DropdownItem>
</Dropdown>
</TopBarSection>
{// <TopBarSection>
// burger menu Icon
// </TopBarSection>
}
</TopBar>
<section
style={{
padding: 50,
textAlign: 'center'
}}
>
Some content
</section>
</>
)
}
export default Navbar
you need to do this instead:
<Button onClick={handleToggle} style={{backgroundImage: `url(${noticon})`}} square>
I'm using Meteor + ReactJS and I'm pulling Material-UI via node modules.
<RadioButtonGroup name="shipSpeed" defaultSelected="not_light">
<RadioButton value="light" label="Simple" style={styles.radioButton} />
<RadioButton value="not_light" label="Selected by default" style={styles.radioButton} />
<RadioButton value="ludicrous" label="Disabled" disabled={true} style={styles.radioButton} />
</RadioButtonGroup>
Here is what it renders.
But it won't change values like it's supposed to do on click. It just stays static.
Check the below example. You have to pass valueSelected and onChange props to RadioButtonGroup to get the values of RadioButton. In onChange function set the selected value in state and pass that state to valueSelected that’s all. As simple as that.
<RadioButtonGroup
valueSelected={this.state.cranRadio}
onChange={this.handleCRAN}
style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between" }}
name="coin"
defaultSelected="not_light"
>
<RadioButton
value="Yes"
label="Yes"
inputStyle={styles.inputStyle}
style={{ width: "auto" }}
labelStyle={{ marginLeft: "-10px" }}
/>
<RadioButton
value="No"
label="No"
style={{ width: "auto" }}
inputStyle={styles.inputStyle}
labelStyle={{ marginLeft: "-10px" }}
/>
</RadioButtonGroup>;
I maybe having similar issue with Checkbox.
If i provide a handler, then the checkbox is not showing 'tick' when checked. Without handler, the check shows with ripple effect.
import mui from 'material-ui';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
...
<mui.Checkbox
label="Employed"
name="Employed"
labelPosition="left"
style={fstyles.checkbox}
onCheck={props.cb}
/>
If I dont provide the onCheck, then the check shows.. should the handler return some value? currently it sets my top level component's state . I tried returning true, but did not help.