sealninja / react-grid-system

A powerful Bootstrap-like responsive grid system for React.
https://sealninja.github.io/react-grid-system/
MIT License
812 stars 83 forks source link

react-grid-system Hidden and Visible don't work #165

Open kepamuk opened 3 years ago

kepamuk commented 3 years ago

Hidden and Visible do not work in device toolbar.

this is visible a block and all Hidden are hidden if not included device toolbar enter image description here

but if you enable device toolbar then they are still displayed enter image description here

And if you move the width of the screen in the device toolbar mode, they will disappear, but when the page is refreshed, it still appears, what is the reason?

  <section className="Panel">
        <Container>
          <Row>
            <Col xl={3} lg={4} md={4}>
              <div className="Panel__logo">
                <img className="Panel__logo-burger" src="/static/svg/Panel__burger.svg" alt=""/>
                <img className="Panel__logo-ONLINE_BOOKMAKERS" src="/static/svg/Panel__ONLINE_BOOKMAKERS.svg" alt=""/>
              </div>
            </Col>
            <Visible sm xs>
              <Col xl={6} lg={5} md={5}>
asddddddddddddddddddd
              </Col>
            </Visible>
            <Visible md lg xl xxl>
              <Col xl={6} lg={5} md={5}>
                <div className="Panel__search">
                  <input className="Panel__search-input" type="text" placeholder="Найти букмекера, игру или ставку"/>
                  <div className="Panel__search-icon"/>
                </div>
              </Col>
            </Visible>
            <Hidden sm xs>
              <Col lg={3} md={3}>
                <div className="Panel__menu">
                  <ul className="Menu">
                    <li className="Menu__item">
                      <img src="/static/svg/Panel__menu1.svg" alt=""/>
                    </li>
                    <li className="Menu__item">
                      <img src="/static/svg/Panel__menu2.svg" alt=""/>
                    </li>
                    <li className="Menu__item">
                      <img src="/static/svg/Panel__menu3.svg" alt=""/>
                    </li>
                    <li className="Menu__item">
                      <img src="/static/svg/Panel__menu4.svg" alt=""/>
                    </li>
                  </ul>
                  <div className="Panel__menu-language"/>
                </div>
              </Col>
            </Hidden>
          </Row>
        </Container>
      </section>
cristinaITdeveloper commented 1 year ago

I have the same problem using <Hidden xs>