I am using grid in semantic ui react and you are able to see in picture name and mob have padding i want to decrease these padding between them
Code:
import React from 'react'
import { Grid, Image } from 'semantic-ui-react'
const GridExampleRows = () => (
<Grid columns={2}>
<Grid.Row>
<Grid.Column>
<span>Name</span>
</Grid.Column>
<Grid.Column>
<span>: Arman</span>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
<span>Mob</span>
</Grid.Column>
<Grid.Column>
<span>: 0987654321</span>
</Grid.Column>
</Grid.Row>
</Grid>
)
export default GridExampleRows
Perhaps try define inline styles with reduced padding, and apply to Grid.Row.
It seems that Image is also included as import but not used in posted example, so the styles value would possibly need to be further adjusted to be also fitting for Image.
Quick basic example: stackblitz
// 👇 Set top and bottom padding 3px, left and right 0px
const rowStyle = { padding: "3px 0px" };
const GridExampleRows = () => (
<Grid columns={2}>
<Grid.Row style={rowStyle}>
<Grid.Column>
<span>Name</span>
</Grid.Column>
<Grid.Column>
<span>: Arman</span>
</Grid.Column>
</Grid.Row>
<Grid.Row style={rowStyle}>
<Grid.Column>
<span>Mob</span>
</Grid.Column>
<Grid.Column>
<span>: 0987654321</span>
</Grid.Column>
</Grid.Row>
</Grid>
);
export default GridExampleRows;
Related
My site has a component (NavPanel) that consists of two components (a back button (BackToButton ) and a search field (SearchTextField )). With a standard screen size, they are positioned as they should be, but if the screen sizes are reduced, then these two components overlap each other.
The most optimal for me would be if, with a compressed screen size, the second component (SearchTextField ) will be located under the first (BackToButton ). Tell me how you can solve this problem?
const Style = {
paddingLeft: '8%',
paddingRight: '8%',
minHeight: '70px',
alignItems: 'center',
flexWrap: 'nowrap',
whiteSpace: 'nowrap'
}
export default function NavPanel() {
return (
<Grid container sx={Style}>
<BackToButton />
<SearchTextField />
</Grid>
);
}
Here you go...
You didn't use the grid correctly.
See the forked snippet here.
EDIT 1
A:
B:
EDIT 2
You can change the breakpoint from sm to md. It means that PageNameBackToButton and FilterButtonSearchTextField will be stacked earlier, but A will not happen.
See the forked snippet here.
PageNameBackToButton.jsx
import React from "react";
import { Tooltip } from "#mui/material";
import BackToButton from "./BackToButton";
const PageName = {
color: "#000000",
fontSize: "20px",
fontWeight: "700",
letterSpacing: "0.2px",
paddingRight: "20px"
};
const PageNameBackToButtonContainerStyle = {
width: "50%",
justifyContent: "start",
alignContent: "center"
};
export default function PageNameBackToButton(props) {
return (
<div sx={PageNameBackToButtonContainerStyle}>
<BackToButton />
<div style={{ marginTop: "5px", display: "inline-block" }}>
<span style={PageName}>Some Text</span>
<span>
<Tooltip title={`Here long long text`} placement="right">
<span
style={{ fontSize: "18px", color: "#ef1400", userSelect: "none" }}
>
Live
</span>
</Tooltip>
</span>
</div>
</div>
);
}
FilterButtonSearchTextField.jsx
import { TextField } from "#mui/material";
const FilterButtonSearchTextFieldContainerStyle = {};
const SearchTextField = {};
export default function FilterButtonSearchTextField() {
return (
<div sx={FilterButtonSearchTextFieldContainerStyle}>
<TextField
required
label="Search Search"
size="small"
style={SearchTextField}
/>
</div>
);
}
Filter.jsx
import React from "react";
import { Grid } from "#mui/material";
import FilterButtonSearchTextField from "./FilterButtonSearchTextField";
import PageNameBackToButton from "./PageNameBackToButton";
import { styled } from "#mui/material/styles";
const FilterContainerStyle = {};
const Root = styled("div")(({ theme }) => ({
padding: theme.spacing(1),
[theme.breakpoints.up("md")]: {
display: "flex",
justifyContent: "flex-end"
}
}));
export default function Filter(props) {
const pageName = props.pageName !== undefined ? props.pageName : "";
const showBackToButton =
props.showBackToButton !== undefined ? props.showBackToButton : false;
return (
<Grid container spacing={2} sx={FilterContainerStyle}>
<Grid item md={6} xs={12}>
<PageNameBackToButton
showBackToButton={showBackToButton}
pageName={pageName}
/>
</Grid>
<Grid item md={6} xs={12}>
<Root>
<FilterButtonSearchTextField table={props.table} />
</Root>
</Grid>
</Grid>
);
}
<Grid container> is meaningless without some <Grid item>s inside it.
Just like the Bootstrap,
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design's responsive UI is based on a 12-column grid layout.
Your code would be like this:
<Grid container spacing={1} sx={Style}>
<Grid item xs={12} sm={6}>
<BackToButton />
</Grid>
<Grid item xs={12} sm={6}>
<SearchTextField />
</Grid>
</Grid>
I strongly recommend reading the MUI Grid Docs.
I'm trying to get a <Button> from the Material UI library to a) sit at same height as the <TextField> next to it; and b) have it be aligned with that same field.
Both the <Button> and the <TextField> are each inside their own <Grid> component (with a container wrapping them).
The container <Grid> has the prop alignItems="center", which produces this result:
It's here I'm running into difficult trying to get the height of the <Button> to match that of the input field. This must be a relatively common requirement - is there a simple way of achieving this?
Given that you have each of your element in a <Grid> component themselves, this should work:
https://codesandbox.io/s/material-ui-playground-forked-1yymw?file=/app.jsx
Use container={true} for Grid to set it as a flex container. Aside from that, you can always leverage makeStyles to generally customize the components' style
MUI Grid container prop
If true, the component will have the flex container behavior.
const useStyles = makeStyles({
fullHeightButton: {
height: "100%"
}
});
function App() {
const classes = useStyles();
return (
<React.Fragment>
<Grid container={true}>
<TextField variant="outlined"/>
<Button variant="contained" color="primary">+</Button>
</Grid>
<br/>
<Grid container={true}>
<Grid><TextField variant="outlined"/></Grid>
<Grid><Button classes={{root: classes.fullHeightButton}} variant="contained" color="primary">+</Button></Grid>
</Grid>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById("test"));
<body>
<div id="test"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/#material-ui/core#latest/umd/material-ui.development.js"></script>
<script type="text/babel">
const { Button, Grid, makeStyles, TextField } = MaterialUI;
</script>
</body>
In my case, I had two buttons that sandwiched a TextField, where the spacing between the first button and the textfield was wrong as shown:
Buttons before code addition
My code was:
<CardActions className='cardactions'>
<Button variant='contained' color='error'> - </Button>
<TextField id='outlined-basic' variant='outlined' size='small' type='number' label='Enter Quantity'/>
<Button variant='contained' color='success'>+</Button>
</CardActions>
Adding sx={{ marginRight:1}} to the first button corrected the issue.
Buttons after code addition
Code after addition:
<CardActions className='cardactions'>
<Button variant='contained' color='error' sx={{ marginRight:1}}> - </Button>
<TextField id='outlined-basic' variant='outlined' size='small' type='number' label='Enter Quantity'/>
<Button variant='contained' color='success'>+</Button>
</CardActions>
I'm trying to create a grid system with a gradient background color. However, the background color also applies to the empty spaces not taken up by grid cells. I want just the grid cells to share this gradient. Is there any way to do this?
Image: https://imgur.com/a/WHVhFg1
You should set a linear background color for your container and set background: 'inherit' for your grid item. Inside your grid item, you should use an image with a no background color.
Try this:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Paper from "#material-ui/core/Paper";
import Grid from "#material-ui/core/Grid";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
background:
"linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)"
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary,
background: "inherit"
}
}));
export default function AutoGrid() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={3}>
<Paper className={classes.paper}>
<img
height="100px"
alt="cat"
src="http://assets.stickpng.com/thumbs/584c3c8a1fc21103bb375ba7.png"
/>
</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>
<img
height="100px"
alt="cat"
src="http://assets.stickpng.com/thumbs/584c3c8a1fc21103bb375ba7.png"
/>
</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>
<img
height="100px"
alt="cat"
src="http://assets.stickpng.com/thumbs/584c3c8a1fc21103bb375ba7.png"
/>
</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>
<img
height="100px"
alt="cat"
src="http://assets.stickpng.com/thumbs/584c3c8a1fc21103bb375ba7.png"
/>
</Paper>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs>
<Paper className={classes.paper}>
<img
height="100px"
alt="cat"
src="http://assets.stickpng.com/thumbs/584c3c8a1fc21103bb375ba7.png"
/>
</Paper>
</Grid>
</Grid>
</div>
);
}
I'm working on a map with an image overlay that has adjustable opacity. Here is the component code:
import React from 'react'
import PropTypes from 'prop-types'
import { MapWithGroundOverlay } from './MapWithGroundOverlay'
import { withStyles } from '#material-ui/core/styles'
import Box from '#material-ui/core/Box'
import FormLabel from '#material-ui/core/FormLabel'
import Slider from '#material-ui/lab/Slider'
import Grid from '#material-ui/core/Grid'
import Paper from '#material-ui/core/Paper'
const styles = theme => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
label: {
padding: theme.spacing(3),
}
})
class AdjustableGroundoverlay extends React.PureComponent {
constructor(props, context) {
super(props, context)
this.state = {opacity: 0.5}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event, value) {
this.setState(state => ({
opacity: value
}));
}
render() {
return (
<Grid container className={this.props.classes.root} spacing={2}>
<Grid item xs={12}>
<MapWithGroundOverlay
googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&v=3.exp&libraries=geometry,drawing,places`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `600px` }} />}
mapElement={<div style={{ height: `100%` }} />}
opacity={this.state.opacity}
/>
</Grid>
<Grid item xs={6}>
<Paper className={this.props.classes.paper}>
<Box flexDirection="column">
<FormLabel className={this.props.classes.label}>Overlay opacity</FormLabel>
<Slider
value={this.state.opacity}
min={0}
max={1}
onChange={this.handleChange}
/>
</Box>
</Paper>
</Grid>
</Grid>
);
}
}
AdjustableGroundoverlay.propTypes = {
classes: PropTypes.object.isRequired,
}
export default withStyles(styles)(AdjustableGroundoverlay)
The problem is that the FormLabel and Slider are too close together. If I hover over them, I see that the Slider has a negative margin of -24px:
It seems like the content of the FormLabel therefore sits directly on top of it:
I've tried to change the styling of the Slider by adding these classes to the component in accordance with https://material-ui.com/api/slider/#css:
<Slider
classes={{container: {marginTop: -12}}}
value={this.state.opacity}
min={0}
max={1}
onChange={this.handleChange}
/>
but the spacing between the FormLabel and the Slider remains the same. Any idea what is wrong with this implementation?
Update
I've noticed in the console that there is this error:
I'm not sure why the key 'container' is not valid though since it is mentioned in https://material-ui.com/api/slider/#css.
I resolved this by putting the slider in a Box with mt set to 1:
<Paper className={this.props.classes.paper}>
<Box flexDirection="column">
<FormLabel className={this.props.classes.label}>Overlay opacity</FormLabel>
<Box mt={1}>
<Slider
value={this.state.opacity}
min={0}
max={1}
onChange={this.handleChange}
/>
</Box>
</Box>
</Paper>
Now there is more spacing between the label and the slider:
I have a <Checkbox> component wrapped in a <FormControlLabel>. They are placed inside a container like this:
<FormGroup row={true} key={option.id}>
<FormControlLabel
className="ContractOfferOptionsSelector__option"
key={option.id}
control={
<Checkbox checked={option.selected} onChange={this.handleChange} value={String(option.id)} />
}
label={this.renderLabel(option)}
/>
</FormGroup>
private renderLabel(option: ISelectableOption) {
return (
<div className="ContractOfferOptionsSelector__option">
<span className="ContractOfferOptionsSelector__option__title">
<span className="ContractOfferOptionsSelector__option__title__abbreviation">{option.abbreviation}</span>
<span className="ContractOfferOptionsSelector__option__title__description">{option.description}</span>
</span>
<span className="ContractOfferOptionsSelector__option__price">
{`${formatCurrency(option.price.priceInclVat)} ${t(option.price.currency)}`}
</span>
</div>
)
}
The label renders as a <span> and 'tightly' wraps the content (so it doesn't take full width of the container). I have put multiple elements inside the label (price, title...) and want to make the label take full width, so that the elements space out across full width.
I tried .ContractOfferOptionsSelector__option {width: 100%;} but it doesn't work because the parent is also a <span>? with a dynamically generated class name...
How can I control the width of the label in material-ui?
<span> has a default inline display property.
Inline elements:
- Respect left & right margins and padding, but not top and bottom
- Cannot have a width and height set
Try to set display: inline-block to your <span> and add position: relative to the FormGroup container.
Solution
(tested with MUI v4)
import React from "react";
import { Checkbox, FormControl, FormControlLabel, FormGroup, makeStyles, TextField } from "#material-ui/core";
export default function App() {
const classes = useStyles();
return (
<FormControl fullWidth>
<FormGroup>
<FormControlLabel
classes={{
label: classes.fullWidth
}}
control={<Checkbox />}
label={<TextField label="Full width" defaultValue="Working" variant="outlined" fullWidth />}
/>
</FormGroup>
</FormControl>
);
}
const useStyles = makeStyles((theme) => ({
fullWidth: {
width: "100%",
},
}));
Full code on codesandbox.
Explanation
As you pointed out in your question, both the label and the control components become span elements inside FormControlLabel, with some default style as well.
To force the label to cover full width, you need to:
Toggle on the fullWidth prop for the FormControl;
Override the label CSS class in FormControlLabel to set its width: 100%