I'm breaking my head over this. I'm using a Grid container, which contains two grids. One with a textfield , and one with a Checkbox . The grids refuses to align correctly.
<Grid container>
<Grid item sm={2}>
<TextField
id="filter"
label={labels.filterHelperText}
value={this.props.brokersListFilter}
onChange={this.onFilterChange}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<FilterListIcon />
</InputAdornment>
)
}}
/>
</Grid>
<Grid item sm={1}>
<FormControlLabel
className={this.props.classes.checkbox}
control={
<Checkbox
checked={this.props.activeAgentsOnly}
onChange={this.props.setActiveAgentsOnly}
color="primary"
/>
}
label={labels.isActive}
/>
</Grid>
</Grid>
With this code, the spacing are too large... If I change the first inner grid to sm={1} , then both grid overlap each other(how is it even possible if they're on different grids ?) I need to somehow make the gap between those two grids smaller .. How can I do that?
Over lapping:
Not over lapping:
Please update grid items like
<Grid item sm={2}>
to
<Grid item sm={6}>
<Grid item sm={6}>
Should equal 12. 8+4 or 6+6 or so on.....
Related
I'm new to reactjs. I have created a dropdown for a company list and want to get values. I still couldn't be able to get values from the dropdown. I've tried several methods of retrieving data but not able to do that. can anyone help me to get values? Here is some of my code.
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<SoftBox mb={1} ml={0.5} lineHeight={0} display="inline-block">
<SoftTypography
component="label"
variant="caption"
fontWeight="bold"
textTransform="capitalize">
Country
</SoftTypography>
</SoftBox>
<Select input={<SoftInput />} value={country} onChange={handleSetCountry}>
<MenuItem value="...">country</MenuItem>
<MenuItem value="10">Hello 10</MenuItem>
<MenuItem value="11">Hello 11</MenuItem>
<MenuItem value="12">Hello 12</MenuItem>
</Select>
</Grid>
Here is my whole code.
/**
=========================================================
* Soft UI Dashboard PRO React - v4.0.0
=========================================================
* Product Page: https://material-ui.com/store/items/soft-ui-pro-dashboard/
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { useState } from "react";
// prop-type is a library for typechecking of props
import PropTypes from "prop-types";
// #mui material components
import Grid from "#mui/material/Grid";
import Select from "#mui/material/Select";
import MenuItem from "#mui/material/MenuItem";
// Soft UI Dashboard PRO React components
import Switch from "#mui/material/Switch";
import SoftBox from "components/SoftBox";
import SoftTypography from "components/SoftTypography";
import SoftInput from "components/SoftInput";
// NewUser page components
import FormField from "layouts/pages/new/new-company/components/FormField";
import { DateTimePicker } from "#material-ui/pickers";
import { distance } from "chroma-js";
function General({ formData }) {
const [country, setCountry] = useState("...");
const handleSetCountry = (event) => setCountry(event.target.value);
const { formField, values, errors, touched } = formData;
const { comNumber, address1, address2, city, state, postcode, additional, phone, phone1, fax, web } = formField;
const { comNumber: comNumberV, address1: address1V, address2: address2V, city: cityV, state: stateV, postcode: postcodeV, additional: additionalV,
phone: phoneV, phone1: phone1V, fax: faxV, web: webV} = values;
const [selectedDate, handleDateChange] = useState(new Date());
const [rememberMe, setRememberMe] = useState(false);
const handleSetRememberMe = () => setRememberMe(!rememberMe);
return (
<SoftBox>
<SoftTypography variant="h5" fontWeight="bold">
General
</SoftTypography>
<SoftBox mt={1.625}>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={comNumber.type}
label={comNumber.label}
name={comNumber.name}
value={comNumberV}
placeholder={comNumber.placeholder}
error={errors.comNumber && touched.comNumber}
success={comNumberV.length > 0 && !errors.comNumber}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={address1.type}
label={address1.label}
name={address1.name}
value={address1V}
placeholder={address1.placeholder}
/>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={address2.type}
label={address2.label}
name={address2.name}
value={address2V}
placeholder={address2.placeholder}
/></Grid>
<Grid item xs={12} sm={6}>
<FormField
type={city.type}
label={city.label}
name={city.name}
value={cityV}
placeholder={city.placeholder}
/>
{/* <FormField
type={city.type}
label={city.label}
name={city.name}
value={cityV}
placeholder={city.placeholder}
error={errors.city && touched.city}
success={cityV.length > 0 && !errors.city}
/> */}
</Grid>
</Grid>
{/* <Grid item xs={6} sm={3}>
<SoftBox mb={1} ml={0.5} lineHeight={0} display="inline-block">
<SoftTypography
component="label"
variant="caption"
fontWeight="bold"
textTransform="capitalize"
>
State
</SoftTypography>
</SoftBox>
<Select input={<SoftInput />} value={state} onChange={handleSetState}>
<MenuItem value="...">state</MenuItem>
<MenuItem value="10">Hello 10</MenuItem>
<MenuItem value="11">Hello 11</MenuItem>
<MenuItem value="12">Hello 12</MenuItem>
</Select>
</Grid>
<Grid item xs={6} sm={3}>
<FormField
type={zip.type}
label={zip.label}
name={zip.name}
value={zipV}
placeholder={zip.placeholder}
error={errors.zip && touched.zip}
success={zipV.length > 0 && !errors.zip}
/>
</Grid>
</Grid> */}
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={state.type}
label={state.label}
name={state.name}
value={stateV}
placeholder={state.placeholder}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={postcode.type}
label={postcode.label}
name={postcode.name}
value={postcodeV}
placeholder={postcode.placeholder}
error={errors.postcode && touched.postcode}
success={postcodeV.length > 0 && !errors.postcode}
/>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<SoftBox mb={1} ml={0.5} lineHeight={0} display="inline-block">
<SoftTypography
component="label"
variant="caption"
fontWeight="bold"
textTransform="capitalize">
Country
</SoftTypography>
</SoftBox>
<Select input={<SoftInput />} value={country} onChange={handleSetCountry}>
<MenuItem value="...">country</MenuItem>
<MenuItem value="10">Hello 10</MenuItem>
<MenuItem value="11">Hello 11</MenuItem>
<MenuItem value="12">Hello 12</MenuItem>
</Select>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={additional.type}
label={additional.label}
name={additional.name}
value={additionalV}
placeholder={additional.placeholder}
/>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={phone.type}
label={phone.label}
name={phone.name}
value={phoneV}
placeholder={phone.placeholder}
error={errors.phone && touched.phone}
success={phoneV.length > 0 && !errors.phone}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={phone1.type}
label={phone1.label}
name={phone1.name}
value={phone1V}
placeholder={phone1.placeholder}
error={errors.phone1 && touched.phone1}
success={phone1V.length > 0 && !errors.phone1}
/>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<FormField
type={fax.type}
label={fax.label}
name={fax.name}
value={faxV}
placeholder={fax.placeholder}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormField
type={web.type}
label={web.label}
name={web.name}
value={webV}
placeholder={web.placeholder}
/>
</Grid>
</Grid>
{/* <Grid container spacing={3}>
<Grid item xs={12} >
<FormField
type={distance.type}
label={distance.label}
name={distance.name}
value={distanceV}
placeholder={distance.placeholder}
/>
</Grid>
</Grid>
<SoftBox display="flex" alignItems="center">
<Switch checked={rememberMe} onChange={handleSetRememberMe} />
<SoftTypography
variant="button"
fontWeight="regular"
onClick={handleSetRememberMe}
sx={{ cursor: "pointer", userSelect: "none" }}
>
Company Opted Out From Surveys
</SoftTypography>
</SoftBox> */}
</SoftBox>
</SoftBox>
);
}
// typechecking props for Address
General.propTypes = {
formData: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
};
export default General;
I need to get dropdown values. Can anyone help me to solve this?
First of all, you should really create a small example in Codesandbox and post it here...
Anyway,
As far as I can see you have two different dropdowns/select components (state and country).
You get no value from neither of them ? The Country one seems to be okay, but the State is missing its event handler (?).
What does a simple console.log output show?:
const handleSetCountry = (event) => {
console.log(event.target.value);
setCountry(event.target.value);
}
Also, try without the
input={<SoftInput />}
and see what happens
Here, justify is not working for me. any guess why?
<Grid container direction='column' alignItems='center' justify='center' spacing='1'>
<Grid item xs={12}>
<Typography variant='h1'>Firt Item</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant='h4'>Firt Item</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant='h6'>Firt Item</Typography>
</Grid>
</Grid>
It's working as supposed to be. The problem is the height of the Grid component is equal to the height of its children together. As a result, changes in the justify value is not visible when direction='column'. So I set the height of the Grid component to 300px as below:
<Grid
style={{ height: "300px" }}
container
direction="column"
alignItems="center"
justify="flex-end"
>
to make changes visible here in sandbox
I have a paper element (div with A4 size), displaying informations enterred by the user (using Context API in Reactjs).
What I want is, in case the paper element is full of text, add another paper and display the remaining informations in it.
this is my code.
<Paper>
<div class="page" data-size="A4">
<Grid container xs={12} direction="column" justify="center" >
<Typography className={classes.title} variant="h5">Experiences </Typography>
<personalInfo.Consumer>
{( {experience} ) => (
experience.map((exp,i) => {
return(
<div key={i}>
<Grid container xs={12} spacing={false}>
<Grid xs={3}>
<Typography className={classes.dates}>
{exp.startdate}-{exp.enddate}<br/>
{exp.city},{exp.country}
</Typography>
</Grid>
<Grid xs={8}>
<Typography >
<h4>{exp.job}</h4>
{exp.employer}
<br/>
{exp.description}
</Typography>
</Grid>
</Grid>
</div>
)})
)}
<personalInfo.Consumer>
</Grid>
</div>
</Paper>```
I'm having a very difficult time trying to achieve something simple with the Grid Component from MaterialUI. Specifically, I'd like to align one item to the left, and another to the right on one layout row.
I've searched extensively, and have not found any solutions that work. I've tried many suggestions, including the use of justifyContent and alignContent within a Grid component, and within JSS, and the flex: 1 technique of 'pushing' content.
Relevant Code Snippets
Trying to put the <Typography> element on the left, and the <FormGroup> on the right:
<Container>
<Grid container spacing={3}>
<Grid className={classes.rowLayout}>
// Goal is to align this to the LEFT
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>Some Text</Typography>
</Grid>
// Goal is to align this to the RIGHT
<Grid item xs={3}>
<FormGroup>
// Simple `Switch` button goes here
</FormGroup>
</Grid>
</Grid>
</Grid>
</Container>
MaterialUI JSS styling:
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: '100%'
},
rowLayout: {
display: 'flex',
alignItems: 'baseline'
},
}));
I'm also finding that, generally speaking, this is requiring the use of many Grid components, and I'd love to write cleaner code if possible.
Do you have any tips or fixes to this problem?
Thanks a million,
Davis
I'm using this at the moment and it works well to align one to the far left, and one to the far right.
Inspired from: How to align flexbox columns left and right?
const useStyles = makeStyles((theme) => ({
right: {
marginLeft: 'auto'
}
}));
<Grid container alignItems="center">
<Grid>
<Typography variant="h4" component="h4">Left</Typography>
</Grid>
<Grid className={classes.right}>
<Button variant="contained" color="primary">Right</Button>
</Grid>
</Grid>
I used a different approach to list one grid item to right. Similar approach can be use to show grid items to right and one at left.
<Grid container>
<Grid item>Left</Grid>
<Grid item xs>
<Grid container direction="row-reverse">
<Grid item>Right</Grid>
</Grid>
</Grid>
</Grid>
I think the best option here is to use flex like this:
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: '100%'
},
rowLayout: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center' // To be vertically aligned
},
}));
As a second choice (and for me the best since you are using Material UI at its fullest expression which if you are using it, it's the best thing to do. Use the library as much as you can) you could do something like this:
<Container>
<Grid container spacing={3}>
<Grid container direction="row" justify="space-between" alignItems="center">
// Goal is to align this to the LEFT
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>Some Text</Typography>
</Grid>
// Goal is to align this to the RIGHT
<Grid item xs={3}>
<FormGroup>
// Simple `Switch` button goes here
</FormGroup>
</Grid>
</Grid>
</Grid>
</Container>
I have solved a similar issue using justifyContent on each of the Grid items.
<Container>
<Grid container spacing={3} alignItems="baseline">
<Grid item xs={6} sx={{
justifyContent: "flex-start"
}}>
<Typography variant="h6" gutterBottom>Some Text</Typography>
</Grid>
<Grid item xs={3} sx={{
display: "flex",
justifyContent: "flex-end"
}}>
<FormGroup>
<Typography variant="h6" gutterBottom>Some Switch</Typography>
</FormGroup>
</Grid>
</Grid>
</Container>
This page gives you a really good visually interpretation of how flex works: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
How can we place component above other components without braking responsive layout?
I have such layout:
<Grid container justify='center'>
<Grid item style={{ height: '100vh', width: '100%' }}>
... some background elements ...
</Grid>
<Grid item xs={12} sm={8} md={6} lg={4}>
... some input element on paper ...
</Grid>
</Grid>
I've tried to set position: absolute:
<Grid item xs={12} sm={8} md={6} lg={4} style={{position: 'absolute'}}>
It works but breaks the xs={12} sm={8} md={6} lg={4} breakpoint changes
How can I place one Grid item above other Grid item in a Grid? (material-ui.com)