In Material-UI v4 the fullWidth prop could be passed to the Datepicker component. However, in v5 this prop is not listed in the component API. All css selectors for this component are non-deterministic and so I am unable to use the width css property. Is there any alternative that I have missed?
Example:
https://codesandbox.io/s/material-ui-v5-forked-fvc3er?file=/src/App.js
For both the DatePicker and TimePicker components in Material-UI v5, you need to set the renderInput prop. When using the TextField component as a rendering component, you can then use the fullWidth prop to expand to the width of its parent.
<DatePicker
inputFormat="MM/dd/yyyy"
value={date}
onChange={(value) => setDate(value)}
renderInput={(params) => <TextField {...params} fullWidth />} <--- This right here
/>
For me the fullWidth Attribute didn't work. I am using the following versions: "#mui/lab": "^5.0.0-alpha.61", and "#mui/material": "^5.2.3".
My solution was simply exchange fullWidth width sx-styles like:
<DatePicker
inputFormat="MM/dd/yyyy"
value={date}
onChange={(value) => setDate(value)}
renderInput={(params) => <TextField {...params} sx={{width: '100%'}} />
Posting an answer for future reference since the above answers didn't work for me.
renderInput={(params) => <TextField {...params} sx={{ gridColumn: "span 4" }}/>
You can change the value of span to increase or decrease length according to your need.
Assuming that the original intention of the thread was for devs like myself who just wanted to know how to customize the size of Material UI's StaticDatePicker component here is my solution to this problem.
In Material v5 we can use the styled to customize any components we like. I also chose to customize the CalendarPicker over the StaticDatePicker because it was easier to target the .MuiCalendarPicker-root class this way.
Related
I am trying to use MUI to create a vertical stack of Select components, but they appear without any spacing between them:
The group is wrapped in a Box and each control looks like this:
<FormControl key={i} fullWidth>
<InputLabel id={`select-label-${i}`}>{mux}</InputLabel>
<Select
labelId={`select-label-${i}`}
value={age}
label="Age"
onChange={handleChange}
>
{/* items omitted */}
</Select>
</FormControl>
When I look at the Sign In template, the two TextFields have vertical spacing seemingly without having to do anything extra:
I have gotten reasonable results from using display: "grid", gridTemplateRows: "repeat(auto-fill 1fr)" on my parent Box but I don't know if this is the simplest solution.
I solved this with a Stack component instead of a Box.
<Stack spacing={2}>
....
</Stack>
I am learning material-ui v5 and it's new styling system, using sx, how do I set a bunch of different element on the same line to have the same height?
<Mui.Box m={2}
component="form"
sx={12}
md={12}
noValidate
autoComplete="off"
>
<Mui.Card variant="outlined" raised sx={{ p: 2 }}>
<Mui.Grid container
spacing={2}
direction="row"
alignItems="center"
justifyContent="center">
<Mui.Grid item xs={12} md={3}>
<Mui.TextField
required
fullWidth
id="password"
label="Password"
type="password"
defaultValue=""
helperText="Some important text"
/>
</Mui.Grid>
<Mui.Grid item xs={12} md={3}>
<Mui.Button
fullWidth
variant="contained"
size="large">
Authenticate
</Mui.Button>
</Mui.Grid>
</Mui.Grid>
</Mui.Card>
</Mui.Box>
Here is what it currently look like:
As you can see they have different height and are not aligned vertically, how do I fix this?
Hover the grid items and you'll notice that the alignItems="center" is possibly starting you at a bad spot.
Change this to top then you know the elements are starting at the same spot. Seeing as you have the helperText, I think the best option is to then set your button height to match the TextField.
So, change the grid container prop alignItems="center" to alignItems="top" and then add something like sx={{ height: "56px" }} to your button.
If you need to do this frequently, make the button a styled component so you don't need to keep adding the sx prop.
See it here: https://codesandbox.io/s/usage-forked-tn7rw?file=/index.js
By the way, line 3 looks like it should be xs, not sx.
You can't control the height of the text box and the button precisely enough in MUI to make them exactly the same height, the "large" button is just slightly larger than a "small" text field.
But you can at least align them better by using alignItems="stretch" in the outer <Mui.Grid>:
But, in general it's much better to organize forms vertically, in a single column:
Single column forms convert a lot be!er than multi-column ones because you only have a single path to follow with your eyes, instead of jumping between blocks.
I'm trying to remove the border around a outlined textfield
<TextField
variant="outlined"
label=""
multiline rows={55}
placeholder="# Hello World"
style={{ width: '90%' }}
/>
but no solutions that i have found worked. I've tried to tinker with all i can find but none remove the border.
If you would like a TextField without the outline border, the best thing to do would be to use the Standard variant of the TextField Component.
By default the Standard variant will have an underline beneath the text, but this can be removed by adding InputProps prop and passing in disableUnderline: true:
<TextField
InputProps={{disableUnderline: true}}
variant="standard"
label=""
multiline
rows={55}
placeholder="# Hello World"
style={{ width: '90%' }}
/>
The result will look exactly the same as if you had an outlined TextField without the outline.
Note that it's not recommended you do this, though, for usability reasons; it'll make the text field less distinguishable and less of a clear touch target for users on mobile. Make sure you have some other kind of indication that it's a text field.
https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03
Is it possible to add "flex-grow" to a Grid item in material ui? Seams a bit weird that I have to choose Box in order to get access to Flexbox https://material-ui.com/system/flexbox/?
Yes, you can add flex-grow using the style attribute.
<Grid item style={{ flexGrow: 1 }}>
<Typography variant="h1" color="textPrimary" >
Title
</Typography>
</Grid>
or you can create a separate class for multiple Grid items.
When my input field is empty and not focused, Material UI would place the label inside the input field as a placeholder.
What I want is, to have the label above the input field all the times, similarly to what it looks like if the input field is selected.
How can I do this?
Example code:
<FormControl>
<InputLabel htmlFor="name">Name</InputLabel>
<Input name="name"
value={name}/>
</FormControl>
For those looking for how to achieve this with TextField component, here:
<TextField
variant="outlined"
InputLabelProps={{
shrink: true,
}}
/>
After 30 mins of pulling my hair... I finally got it. The property you are looking for is not called disableAnimation as one could thought, it's the shrink property. API docs - https://material-ui.com/api/input-label/
<FormControl>
<InputLabel htmlFor="name" shrink='true'>Name</InputLabel>
<Input name="name"
value={name}/>
</FormControl>