As per the demo, the label for a MUI outlined select input should sit on top of the top border of the select box.
However, in my application, the z-index of the label seems to be placing it behind the top border and thus it looks like a line is cutting through the label.
I have pretty much taken the code exactly from the documentation, and as far as I know, do not have any styles conflicting with this input element. I have compared the styles in the debugger to what I have and what is present in the documentation, and I do not see any of my first party CSS files causing a different style to be set on the element.
Any idea what might be going wrong here?
Here is the source code:
<FormControl variant='outlined' style={{ width: '100%' }} margin={'1'}>
<InputLabel id='test-select-label'>Label</InputLabel>
<Select
labelId='test-select-label'
id='test-select'
value={'test1'}
onChange={e => setTest(e.target.value)}
size='small'
>
<MenuItem key={1} value={'test'} >Test 1</MenuItem>
<MenuItem key={2} value={'test2'} >Test 2</MenuItem>
</Select>
</FormControl>
Solution 1: Use TextField
This is what TextField is for. It uses FormControl and InputLabel internally and make sure they work well together. You can tell TextField to render select instead input by overriding the select props:
<TextField
value={value}
onChange={(e) => setValue(e.target.value)}
select // tell TextField to render select
label="Label"
>
<MenuItem key={1} value="test">
Test 1
</MenuItem>
<MenuItem key={2} value="test2">
Test 2
</MenuItem>
</TextField>
For more detail about how TextField works, see this answer.
Solution 2: Use Select
If you decide to use Select, you need to write more code to do the same amount of work:
Pass the label text as InputLabel children
<InputLabel id="test-select-label">Label</InputLabel>
This label text will be rendered on the screen as the Select label when put inside FormControl and next to the Select component.
Pass the label text to the label props of the Select component
This label text is hidden and used to override and remove the part of the border-top where the real label is occupied when the Select label is shrinked.
<Select labelId="test-select-label" label="Label">
Putting it together we'll have something like below, note that with this approach we need to set the label in 2 different places which is not very DRY, so I'd prefer the first approach.
<FormControl>
<InputLabel id="test-select-label">Label</InputLabel>
<Select
value={value}
onChange={(e) => setValue(e.target.value)}
labelId="test-select-label"
label="Label"
>
<MenuItem key={1} value="test">
Test 1
</MenuItem>
<MenuItem key={2} value="test2">
Test 2
</MenuItem>
</Select>
</FormControl>
Live Demo
If you add the label property to your select component your problem should disappear.
...
<Select
value={value}
onChange={(e) => setValue(e.target.value)}
label="Label" // add this
>
<MenuItem key={1} value="test">
Test 1
</MenuItem>
<MenuItem key={2} value="test2">
Test 2
</MenuItem>
</Select>
...
Here is a live demo where you can see the difference:
Try this method, it worked for me.
JSX:
<TextField select variant={"outlined"} style={{width: "100%"}} label="Label">
<MenuItem key={1} value="test">
Test 1
</MenuItem>
<MenuItem key={2} value="test2">
Test 2
</MenuItem>
</TextField>
CSS:
.MuiSelect-outlined.MuiSelect-outlined, .MuiSelect-outlined.MuiSelect-outlined:active, .MuiSelect-outlined.MuiSelect-outlined:focus {
background-color: transparent;
text-align: left;
font-family: sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
}
I had a similar issue when I tried to set padding on the FormControl component. I had the proper id and label, but it was still an issue. CSS is not my strong suit, but I noticed that if I could replicate the layout I wanted using margin on the FormControl component, the label aligned appropriately. See image with padding instead of margin:
Related
It seems that there were quite a lot of questions and answers on this topic, but I could not find anything suitable for myself. I ask the community for help.
I'm using the Select component from #mui/material to display the number of records per page. And I'd like to change the color of the window's border when it's clicked, and the background color of the currently selected element.
I marked with a red arrow in the picture those elements that I want to change.
SelectMenuItemsPerPage.jsx
import React from 'react';
import { MenuItem, Select } from "#mui/material";
import { styles } from './SelectMenuItemsPerPageStyles';
export default function SelectMenuItemsPerPage({ pageSize, setPageSize }) {
const handleChange = (event) => {
setPageSize(Number(event.target.value));
};
return (
<Select
value={pageSize}
onChange={handleChange}
sx={styles.Select}
>
<MenuItem value={5}>5</MenuItem>
<MenuItem value={10}>10</MenuItem>
<MenuItem value={25}>25</MenuItem>
<MenuItem value={50}>50</MenuItem>
<MenuItem value={100}>100</MenuItem>
</Select>
);
}
You need to add the following CSS to this page, add this to index.css or globals.css (In the case of Next.js).
The code
.MuiMenuItem-root.Mui-selected {
background: yellow;
}
.MuiTablePagination-select[aria-expanded="true"] {
border: 2px solid green;
}
The output
Play around with the code here
You need to use MenuProps and style it as follows:
<Select
MenuProps={{
sx: {
"&& .Mui-selected": {
color: "red",
background: "rgba(0,233,0,0.2)",
},
},
}}
Here is the complete working example:
<Select
value={val}
MenuProps={{
sx: {
"&& .Mui-selected": {
color: "red",
background: "rgba(0,233,0,0.2)",
},
},
}}
sx={{
"& [aria-expanded=true]":{
background: "rgba(0,233,0,0.2)",
},
}}
onChange={(e) => setVal(e.target.value)}
>
<MenuItem value={5}>5</MenuItem>
<MenuItem selected value={10}>
10
</MenuItem>
<MenuItem value={25}>25</MenuItem>
<MenuItem value={50}>50</MenuItem>
<MenuItem value={100}>100</MenuItem>
</Select>
The output (You can style them as you wish):
I have defined a React select component as follows:
<FormControl>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label="Age"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
This renders as follows:
When not clicked:
When clicked:
Notice that when not clicked, the label Age is not completely displayed.
I know I can mage label "Age" display completely by having set sx={{minWidth: 80}} on FormControl. But that is not "Automatic". What if my label changes dynamically? I somehow want the select component to adjust width to display label completely. Is it possible?
import React from 'react';
import Select, { components } from 'react-select';
import makeAnimated from 'react-select/lib/animated';
import 'bootstrap/dist/css/bootstrap.css';
const colourOptions = [] //our array of colours
class App extends React.Component {
render(){
return (
<Select
className="mt-4 col-md-6 col-offset-4"
components={makeAnimated()}
isMulti
options={colourOptions}
/>
);
}
}
export default App;
I think you can add fullWidth on the FormControl, that can solve your problem, the select component will display well.
You can try my code like below:
<FormControl fullWidth>
I have created a React component using Material UI as below
<Popper
open={open}
anchorEl={anchorRef.current}
onBlur={handleToggle}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input type="text" name="Student" onChange={getStudent}></input>
</Popper>
In the above component i have MenuList and TextField. I tried to add onBlur={handleToggle} thinking that, it will close the component if clicked outside of it but its closing even when i am trying to add text in TextField using onChange={getStudent}, Why is it happening and how to close Component only if clicked outside of it? Thanks.
You can use ClickAwayListener component to detect whether the user is clicking outside of the Popover area.
<ClickAwayListener onClickAway={() => setOpen(false)}>
<span>
<Popper
open={open}
anchorEl={ref.current}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input
type="text"
name="Student"
/>
</Popper>
<Button variant="outlined" onClick={() => setOpen((o) => !o)} ref={ref}>
Nothing
</Button>
</span>
</ClickAwayListener>
Live Demo
I am new to react and am using the select button of material-ui. It adds a highlight text of whatever we give and it should go away once the element is selected.
However on the selection of an option the two texts get blurred like this:
Here is the code for the same:
<Grid item xs={6}>
<FormControl id="Process" style={{ width: "78%" }} size="small">
<InputLabel
htmlFor="Process"
id="Process"
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
>
Process
</InputLabel>
<Select
labelId="Process"
name="Process"
id="Process"
onChange={() => this.setState({ addModalShow: true })}
defaultValue={values.Process}
variant="outlined"
inputProps={{
id: "Process"
}}
>
<MenuItem value="1">Implemented</MenuItem>
<MenuItem value="2">Implementation in Progress</MenuItem>
<MenuItem value="3">Not Implemented</MenuItem>
</Select>
</FormControl>
<Button
variant="outlined"
color="primary"
onClick={() => this.setState({ addModalShow: true })}
size="small"
style={styles.button2}
>
+
</Button>
<label
id="process"
style={{ visibility: "hidden", color: "red" }}
>
Process cannot be blank
</label>
</Grid>
</Grid>
Could anyone please tell me why this is happening?
Ciao, your problem is connected to the style you applied on InputLabel. In standard version, InputLabel does not disappears when you select a value on Select component. Will be just moved on top of the Select element.
If you made a style customization on InputLabel, the label will be not moved on top and you will see the two texts blurred. So you have 2 choices:
Remove style customization, I mean remove this css:
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
put a condition to InputLabel content. Something like:
{values.Process === "" && "Process"}
In this way, Process label will be visible only if you haven't selected nothing on Select component.
Here a codesandbox example.
I am using react-toolbox menu for my website. Based on the example given in the documentation React-toolbox menu, I can only use icon as my menu. How can I use text for the menu instead?
Example of what I want to do:
When I click the blog text which is a menu, the menuItem will be shown.
Is it possible to do this?
just remove icon property from MenuItem component
<IconMenu icon={<div>blog</div>} position='topLeft' menuRipple>
<MenuItem value='download' caption='Download' />
<MenuItem value='help' caption='Favorite' />
<MenuItem value='settings' caption='Open in app' />
<MenuDivider />
<MenuItem value='signout' icon='delete' caption='Delete' disabled />
</IconMenu>
You can pass an element to the icon property like that:
<IconMenu icon={<div>Menu</div>} position='topLeft' menuRipple>
In case someone else has the problem, the solution is to use Menu component instead of IconMenu. Like this :
const [menuActive, setMenuActive] = useState(false);
return (
<div style={{ position: 'relative' }}>
<Button label='Actions' onClick={() => setMenuActive(!menuActive)} />
<Menu position='topRight' active={menuActive} onHide={() => setMenuActive(false)}>
<MenuItem value='download' caption='Download' />
<MenuItem value='action' caption='Action' />
</Menu>
</div>
);