CODEWITHSUNDEEP
cssreactjsmaterial-uigrid
Paul
Paul

Reputation: 197

Two components overlap each other when screen size is reduced

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>
    );
}

Upvotes: 0

Views: 912

Answers (2)

Rok Benko
Rok Benko

Reputation: 22910

Here you go...

You didn't use the grid correctly.

See the forked snippet here.

EDIT 1

A:

A

B:

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>
  );
}

Upvotes: 1

Hamed Siaban
Hamed Siaban

Reputation: 1682

<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.

Upvotes: 1

Related Questions