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.
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'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
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.
I have a Material UI phone number and when my website is displayed RTL, the phone number aligns itself to the right, but the number also gets messed up. How can I make sure that the number stays as is?
<div open={this.props.open} onClose={this.props.onClose} dir="rtl">
<DialogTitle title="New User" />
This text will be RTL led !
<div>
<Typography component="label">'Phone Number'</Typography>
<MuiPhoneNumber
name="phone"
data-cy="user-phone"
defaultCountry={"us"}
value={this.state.phone}
value="1(937)-123-4567"
onChange={this.handlePhoneChange}
/>
<p>614-764-6300</p>{" "}
{/* number is right aligned but number stays the same which is how it should be*/}
</div>
</div>
Here is the codesandbox link https://codesandbox.io/s/mui-phone-number-forked-cczzj?file=/src/CreateUserDialog.js
I get the same behavior on any HTML input element with type="tel", and that has dir="rtl".
If you want to keep that field left to right you can give it a prop inputProps={{dir: "ltr"}} and make the text aligned to the right with some CSS like text-align: right;
I am getting started with react ag-grid, and it seems that the tutorials the provide have hardcoded with and height:
<div
className="ag-theme-balham"
style={{ height: '200px', width: '600px' }}
>
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}>
</AgGridReact>
</div>
If I remove width and height specs, the grid simply doesnt show up.
I really dont want to have some magical size numbers. If I am using Bootstrap or Material CSS, and I have the notion of a "centered container" class with some controls in it, I would like the grid to be of that container size -- is that possible? I dont know CSS at all -- kind of cutting and pasting examples, but essentially, I want a series of input controls, centered on my page vertically -- and ag-grid among them. this doesnt seem to be an issue with the "standard" html inputs/buttons, but ag-grid is a different beast. thank you
Something like this:
<div style={{height: '500px', width: '100%', position: 'absolute'}}>
<div className="ag-theme-balham" style={{height: '100%'}}>
<AgGridReact gridOptions={gridOptions}/>
</div>
</div>
Here the grid height will always be the same as outer div height.