CODEWITHSUNDEEP
reactjsmaterial-ui
laneherby
laneherby

Reputation: 485

How to work with Grid direction="row" in Material UI

I'm trying to put two select boxes next to each other using the Grid component. No matter if I change the direction of the container they are always stacked on top of each other. I want them side by side.

Here is a screenshot of the page :
image

Here is the code:

<Grid container>
    <Grid item container direction="row">
        <Grid item xs={12} sm={6}>
        <Select
            key={"msSeasons"}
            placeholder={"Seasons.."}
            options={multiSelectArrays.seasons}
            isMulti={true}
            isSearchable={false}
            onChange={e => onSelectChange(e, "seasons")}
        />
        <Select
            key={"msOuts"}
            placeholder={"Outs.."}
            options={multiSelectArrays.outs}
            isMulti={true}
            isSearchable={false}
            onChange={e => onSelectChange(e, "outs")}
        />
        </Grid>
    </Grid>
</Grid>

Upvotes: 1

Views: 10042

Answers (1)

Hasta Dhana
Hasta Dhana

Reputation: 4719

You could make a separate grid item for each select element to keep it in a single row : 

<Grid container>
    <Grid item container direction="row">
        <Grid item xs={12} sm={6}>
            <Select
                key={"msSeasons"}
                placeholder={"Seasons.."}
                options={multiSelectArrays.seasons}
                isMulti={true}
                isSearchable={false}
                onChange={e => onSelectChange(e, "seasons")}
            />
        </Grid>
        <Grid item xs={12} sm={6}>
            <Select
                key={"msOuts"}
                placeholder={"Outs.."}
                options={multiSelectArrays.outs}
                isMulti={true}
                isSearchable={false}
                onChange={e => onSelectChange(e, "outs")}
            />
        </Grid>
    </Grid>
</Grid>

Upvotes: 4

Related Questions