Way to hide components for specific screen size

Post Reply
zezhayz
Posts: 11
Joined: 21 Aug 2016, 14:09

21 Mar 2020, 15:03

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
Posts: 11
Joined: 21 Aug 2016, 14:09

21 Mar 2020, 16:20

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 :)

aragorn
Posts: 3978
Joined: 29 Jun 2013, 12:38

03 Apr 2020, 11:02

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

Best Regards,

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests