Hide element with antd (Ant Design Grid)

Question

I want to hide some divs when it hit certain breakpoints, in bootstrap v4 there is something like: hidden-sm-down

After reading the Grid documentation, setting <Col xs={0}></Col> may be the solution

here is my example: http://codepen.io/kossel/pen/BQgzNg?editors=0110

However expected with only xs={0} would hide the sidebar at XS view, but it hidden at every screen size, the solution/hack is to put add another breakpoint like sm={1} to make it work as expected.

What is the correct way to do this?

Answer 1

I should have respond my own question. it's not a bug, it's the intended design.

after reading https://github.com/roylee0704/react-flexbox-grid/issues/13

the idea of "Hiding element when in xs" size is actually an anti-patter for responsive design. the idea should be "show when more than sm size"

We should keep in mind "mobile first", which means, we should hide the menu by default (as it should be hidden for mobile) and then show it according to the screen size.

.sidebar {
  display: none;
}

and then do

<Col sm={4}></Col>

but if we really need something handy, I also added this to my mixin.less

@media (min-width: @screen-sm-min) {
  .visible-sm      { display: block !important; }
  .row.visible-sm  { display: flex !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: -webkit-box !important;
    display: flex!important; }
  table.visible-sm { display: table !important; }
  tr.visible-sm    { display: table-row !important; }
  th.visible-sm,
  td.visible-sm    { display: table-cell !important; }
  .flex-column-sm   {flex-direction: column; }
}
@media (min-width: @screen-md-min) {
  .visible-md      { display: block !important; }
  .row.visible-md  { display: flex !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: -webkit-box !important;
    display: flex!important; }
  table.visible-md { display: table !important; }
  tr.visible-md    { display: table-row !important; }
  th.visible-md,
  td.visible-md    { display: table-cell !important; }
  .flex-column-md   {flex-direction: column; }
}
@media (min-width: @screen-lg-min) {
  .visible-lg      { display: block !important; }
  .row.visible-lg  { display: flex !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: -webkit-box !important;
    display: flex!important; }
  table.visible-lg { display: table !important; }
  tr.visible-lg    { display: table-row !important; }
  th.visible-lg,
  td.visible-lg    { display: table-cell !important; }
  .flex-column-lg   {flex-direction: column; }
}
@media (min-width: @screen-xl-min) {
  .visible-xl      { display: block !important; }
  .row.visible-xl  { display: flex !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: -webkit-box !important;
    display: flex!important; }
  table.visible-xl { display: table !important; }
  tr.visible-xl    { display: table-row !important; }
  th.visible-xl,
  td.visible-xl    { display: table-cell !important; }
  .flex-column-xl   {flex-direction: column; }
}

@media (min-width: @screen-md-min) { .hidden-md { display: none !important; } }
@media (min-width: @screen-lg-min) { .hidden-lg { display: none !important; } }
@media (min-width: @screen-xl-min) { .hidden-xl { display: none !important; } }
/** utilities **/

.center-block {
  margin-right: auto !important;
  margin-left: auto !important;
  display:block;
}

Answer 2

I think you may have found a bug - or at least a requirement to specify more than one breakpoint span to get expected results. That seems to be a valid way to hide grid columns though.

Antd uses CSS alongside React with generated className values for its components. Since you aren't really using the grid other than just to show and hide a component, I would recommend creating your own classes using media queries and then adding them to your components via the className prop.

Here's an example from the code for the Form.Item component.

@media (max-width: @screen-sm-max) {
  .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout();
  }
}

https://github.com/ant-design/ant-design/blob/6b8eeb79d11a53df3ff47bc525d0b7db714a8a2c/components/form/style/index.less#L274

You can define something like that in a LESS or CSS file and import it into your React component. You could use LESS to access the @screen-sm-max variable. Like this:

@import "~antd/lib/style/themes/default.less"

@media (min-width: @screen-sm-min) {
  .class-name-to-show-mobile-hide-desktop {
    display: none;
  }
}
@media (max-width: @screen-sm) {
  .class-name-to-show-desktop-hide-mobile {
    display: none;
  }
}

Also see notes here on customizing the theme variables. https://ant.design/docs/react/customize-theme

I didn't see any existing utility components or classes that you could reuse like there is in bootstrap.