I am using the Select component of material ui. I want to customise the dropdown menu with a top arrow. I have overriden menuStyle using pseudo element before. However, the arrow appears on the screen even before clicking on the dropdown. This is because the class is used in select element as well. I want to target dropdown menu by checking for the siblings.
<Select
value={this.state.date}
onChange={this.handleChange}
displayEmpty
name='date'
autoWidth={false}
className={classes.selectWithArrow}
classes={{
icon: classes.icon,
selectMenu: classes.menuStyle,
select: classes.select,
}}
renderValue={value => this.state.date}
root={classes.root}
input={
<Input
name='date'
id="label-placeholder"
classes={{
root: classes.root,
}}
/>
}
MenuProps={{ classes: { paper: classes.menuStyle } }}
>
<MenuItem value={1}>One</MenuItem>
<MenuItem value={2}>Two</MenuItem>
<MenuItem value={3}>Three</MenuItem>
</Select>
I want to target siblings something like this -
const styles = theme => ({
'.menuStyle.selectMenu': {
'&::before': {
},
}
});
Is there any way? Any leads will be highly appreciated.
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'm trying to show a school's cancelled classes in a select menu. It's arranged by day:
However, my menu just cuts off the overflow text when at a mobile resolution in developer tools.
The thermodynamics class is cut off.
I'm using material ui's select menu with react. Material UI Select documentation I'm also using the menu item. I want to have classes listed overflow onto the next line. The is where I show the classes per day.
This is the code (it's just an example, and it doesn't run):
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<FormControl className={classes.formControl}>
<InputLabel id="demo-controlled-open-select-label" > Filter classes by day</InputLabel>
<Select
labelId="demo-controlled-open-select-label"
id="demo-controlled-open-select"
open={open}
onClose={handleClose}
onOpen={handleOpen}
defaultValue={subjectFilter}
onChange={handleChangeSubject}
className="styleSelect"
>
{item.SUBJECT === 'OPEN_LEARNING' &&
<ul className ="stylingList">
{(state.subjects) && state.subjects.filter(item =>
(item.SUBJECT === 'OPEN_LEARNING')).map(item =>
<li className ="stList">
{item.CLASS_FULL}
</li>
)}
</ul>
}
</MenuItem>
//this is just one day. I do this for all the days.
) )
}
</Select>
</FormControl>
I don't have styles on the classes listed. I just made class names to customize the areas later if needed. I just changed the text color. Thanks. I tried overflow-wrap: break-word; on the li class (stList), but it didn't make the words go to the next line.
TL;DR: Override the wrapping style of the Menu Item:
const useStyles = makeStyles((theme) => ({
root: {
whiteSpace: "unset",
wordBreak: "break-all"
}
}));
//...
const YourComponent =(props)=>{
const classes = useStyles();
//...
<MenuItem classes={{ root: classes.root }}>
}
NL;PR: By default, the menu item style whiteSpace: 'nowrap' prevents the other wraps to apply. You can inspect how the suggested changes work in this pastebin.
Now, your select's menu items will go:
From this:
to this: .
Use ListItem instead of MenuItem:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<FormControl className={classes.formControl}>
<InputLabel id="demo-controlled-open-select-label" > Filter classes by day</InputLabel>
<Select
labelId="demo-controlled-open-select-label"
id="demo-controlled-open-select"
open={open}
onClose={handleClose}
onOpen={handleOpen}
defaultValue={subjectFilter}
onChange={handleChangeSubject}
className="styleSelect"
>
{item.SUBJECT === 'OPEN_LEARNING' &&
<ul className ="stylingList">
{(state.subjects) && state.subjects.filter(item =>
(item.SUBJECT === 'OPEN_LEARNING')).map(item =>
<li className ="stList">
{item.CLASS_FULL}
</li>
)}
</ul>
}
</ListItem>
//this is just one day. I do this for all the days.
) )
}
</Select>
</FormControl>
I have a select build by material-ui, all function is fine, but I want to alignt top line of select list to bottom line of input block, how could I do this?
My code :
const styles = theme => ({
formControl: {
margin: theme.spacing.unit
}
});
<FormControl className={classes.formControl} fullWidth={true}>
<InputLabel htmlFor="deviceSource-native-select">Device source</InputLabel>
<Select
native={true}
onChange={this.onDeviceSourceChange}
inputProps={{
id: 'deviceSource-native-select',
name: 'deviceSource'
}}
>
<option value={'Ten'}>Ten</option>
<option value={'Twenty'}>Twenty</option>
<option value={'Thirty'}>Thirty</option>
</Select>
</FormControl>
I have created a CodeSandbox that replicates your issue here: https://codesandbox.io/s/k279v04v3v
Unfortunately, using native={true} means that you are at the mercy of specific browser implementations as to how your select dropdown is displayed. You can't change it.
If you are willing to use a non-native select it will be possible by setting the following prop on your Select component:
MenuProps={{
getContentAnchorEl: null,
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
}
}}
Here's a fork of the above CodeSandbox with the select non-native and the above prop set: https://codesandbox.io/s/jpw77oo315
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>