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>
Related
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.
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.
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.
Am new to ZK and using combobox in my page.I gave width="100%" to combobox but it doesn't take and if I refresh the page , the combobox shrinks.
Please anyone tell me how I can set common width to entire combobox in my application uniformly?
There are few ways to do what you want. for example:
<div sclass="positionInfo">
<combobox readonly="true" width="30%" model="#load(vm.positionModel)" constraint="no empty:Please select position!"
selectedItem="#bind(fx.position)" tabindex="3">
<template name="model" var="po">
<comboitem label="#load(po.positionName)" value="#load(po.positionId)" />
</template>
</combobox>
</div>
put your combobox inside div element, then set CSS class named "positionInfo".
set CSS rule for CSS selector .positionInfo (width by a specific pixels or percent), then everything will be done.
I have an HTML input element of type select. The height of the element is 28px. Without modifying the element with CSS, the text inside gets automatically vertically-aligned in all browsers except for IE8. In IE8 the select's text is in the bottom left corner of the element.
Does anyone know how to vertically-align the text inside an HTML select element?
Without your html it is hard to know exactly what you are styling. It sounds like you are using something like <input type="select" /> but that isn't actually valid html.
However, to vertically align the text in the middle you need to set the line-height to be the same figure as your height.
So in this case you would need to set line-height: 28px; to match height: 28px;.
For your html I would recommend either using:
<input type="text" /> if you are looking for a standard text input
or
If you are looking for a drop down selection:
<select>
<option value="Test1">Test 1</option>
<option value="Test2">Test 2</option>
</select>