I'm using core 4.1.2 and styles 4.1.2
I don't want text to wrap on a usage of:
<Typography variant="h6" noWrap={true}>
{this.props.something}
</Typography>
The line is breaking before the opening <Typography> and items that are in the <Typography> component are not wrapping but anything after the component wraps. How do I keep it from wrapping before this component?
I tried noWrap="true" and inline="true".
I fixed this with CSS on <Typography />:
.class {
white-space: nowrap;
}
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.
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.
Could you guys tell me why css class definition doesn't work in following example ?
I'm using GWT 2.4 + Chrome 17.
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
div.test {
color: red;
}
</ui:style>
<g:HTML>
<div class="test">I should be red but I'm not</div>
</g:HTML>
</ui:UiBinder>
CSS classes listed in the <ui:style> will be obfuscated, going from test to GKYSKJX (or something similar).
Update your div to this:
<div class="{style.test}">Now I'm red :)</div>
Alternatively, you could choose to force your style to NOT obfuscate by doing this:
#external .test;
div.test {
color: red;
}
Unless you have a good reason, I recommend sticking with the first method.
See more at Declarative Layout with UiBinder - Hello Stylish World.