Semantic-Ui: How to Hide Element on Mobile Only

Hide element for mobile only - Semantic UI

Also, I found one more solution. May be for someone it will helpful.

I've added classes "mobile hidden" to column which I wanted to hide on mobile devices.

<div class="ui grid stackable">
 <div class="row middle aligned">
  <div class="nine wide column">
   <h1 class="ui header blue">Default Header.</h1>
  </div>
  <div class="seven wide column mobile hidden">
    <img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="Sample Image" title="">
  </div>
</div>

Which are the correct classes for responsive visibility in Semantic-UI?

Updated to reflect current docs and version 2.4.2

Responsive Visibility works by hiding a certain element (usually a ui container, but can also be e.g. grid rows) on specific screen sizes. For example, <div class="ui container mobile only"> would only be shown when the screen is less than 768px wide.

The documentation for Grid has a Device Visibility section which demonstrates several possible visibility modifiers:

1. Mobile (mobile only)
2. Tablet (tablet only)
3. Tablet and Mobile (tablet mobile only)
4. Computer (computer only)
5. Large screen (large screen only)
6. Widescreen (widescreen only)
7. All Sizes (no modifier)

The documentation doesn't explicitly mention what the device breakpoints are. Like most things, they can be configured via SASS variables when building Semantic UI and are defined inside site.variables. The default breakpoints are:

1. mobile only will only display below 768px
2. tablet only will only display between 768px - 991px
3. computer only will always display 992px and above
4. large screen only will only display between 1200px - 1919px
5. widescreen only will only display 1920px and above

As seen in the documentation for Grid, it's possible to combine these as well - e.g. tablet mobile only and mobile computer only are perfectly valid.

React semantic UI table show and hide columns

In react you can do it using the state management.

Example:

1. In constructor, create

   this.state={hide:true}

in table if you want to hide a Table Row,

write like this:

{
(this.state.hide==false)?null:<Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
    </Table.Body>
}

It will not show that row.
This is because the react rendering is state based.

If you want to hide then you have to set the state as hide=true i.e.

this.setState({hide:true})

Have an element only show when another element is not on screen

If you want to show the second button when the user scrolls past the first button, then you will need some javascript to do that.

HTML

<button id="btn1"></button>
<button id="btn2"></button>

CSS

#btn1 {
  display: block;
}

#btn2 {
  display: none;
}

#btn2.show {
  display: block;
}

JS

var scrollAmount;
var btn2 = document.getElementById("btn2");
window.addEventListener("scroll", function() {
  scrollAmount = window.scrollY;
  if(scrollAmount > 768px) {
    btn2.classList.add("show");
  } else {
    btn2.classList.remove("show");
  }
});

768px is the scroll amount after which the first button disappears from the viewport.

---

Related Topics