Way to hide components for specific screen size

[zezhayz]

Is there a way in Ultima to hide components by screen size like Adminfaces?

Check this example:
https://github.com/adminfaces/admin-sta ... form.xhtml

The classes "hidden-sm hidden-xs" hides components for small devices

Line 23

Code: Select all

<div id="main-buttons" class="hidden-sm hidden-xs"> </div> 

And classes "hidden-md hidden-lg" hides component for medium and large screens

Line 45

Code: Select all

<p:splitButton value="Save" action="#{carFormMB.save}" update="@form"
                               icon="fa fa-check"
                               styleClass="hidden-md hidden-lg btn-primary" /> 

This kind of classes are very useful.

[zezhayz]

I figured out that these classes are bootstrap's ones.

I have isolated them in a separate css file and it works perfectly.

Code: Select all

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

I hope the post will help someone

[mert.sincan]

Glad to hear, thanks a lot for the attached code!

Best Regards,