show/hide on desktop/mobile

Post Reply
tony.herstell
Posts: 141
Joined: 29 Nov 2011, 00:40

29 Oct 2019, 04:55

Hi Team

I have used Sentinel and used "show on mobile/desktop" extensively to "swap in/out" sections (e.g. You Tube player window)...

Visibilities According To The Platform
ShowOnMobile Only visible on screen widths smaller than 960px.
ShowOnDesktop Only visible on screen widths bigger than 960px.

https://www.primefaces.org/eos/sentinel ... tion.xhtml

Is there something similar in Atlantis?
JEE 8 (CDI, JPA etc.) (No Spring)
Target JBoss Wildfly 21+ and Quarkus

mert.sincan
Posts: 4123
Joined: 29 Jun 2013, 12:38

30 Oct 2019, 12:07

Unfortunately, no! But, you can do it easily using @media queries.

Code: Select all

@media (min-width: 960px){
    /*visibilities according to the platform*/
	.ShowOnMobile{display:none; opacity:0;}
	.ShowOnDesktop{display:inherit; opacity:1;}
}
/* Portrait tablet to landscape and desktop */
@media (max-width: 959px) {
	.ShowOnMobile{display:inherit; opacity:1;}
	.ShowOnDesktop{display:none; opacity:0;}
}


Best Regards,

tony.herstell
Posts: 141
Joined: 29 Nov 2011, 00:40

30 Oct 2019, 22:32

aragorn wrote:
30 Oct 2019, 12:07
Unfortunately, no! But, you can do it easily using @media queries.

Code: Select all

@media (min-width: 960px){
    /*visibilities according to the platform*/
	.ShowOnMobile{display:none; opacity:0;}
	.ShowOnDesktop{display:inherit; opacity:1;}
}
/* Portrait tablet to landscape and desktop */
@media (max-width: 959px) {
	.ShowOnMobile{display:inherit; opacity:1;}
	.ShowOnDesktop{display:none; opacity:0;}
}


Best Regards,
Great...
But how do I use this?

I assume put the above in a .css file that gets loaded

Then how do I use this in a .xhml page?

<!-- show on mobile ->
<p:something class="ShowOnMobile">
...

<!-- show on desktop ->
<p:something class="ShowOnDesktop">
...
JEE 8 (CDI, JPA etc.) (No Spring)
Target JBoss Wildfly 21+ and Quarkus

mert.sincan
Posts: 4123
Joined: 29 Jun 2013, 12:38

20 Dec 2019, 16:19

You can add it into _theme_styles.scss and then provide new theme.css using sass command.
OR
You can create a css file and then add the above css into it.

Code: Select all

//Xhtml
<p:something styleClass="ShowOnMobile">

<p:something styleClass="ShowOnDesktop">

Post Reply

Return to “Atlantis - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests