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?
show/hide on desktop/mobile
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 214
- Joined: 29 Nov 2011, 00:40
PF12+, Quarkus 3.2+ (CDI, JPA etc.), JSF Bridge (MyFaces 4.0.1)
Dont forget the classifier:
Dont forget the classifier:
Code: Select all
...primefaces
<classifier>jakarta</classifier>
... theme
<classifier>jakarta</classifier>
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Unfortunately, no! But, you can do it easily using @media queries.
Best Regards,
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,
Github Profile: https://github.com/mertsincan
-
- Posts: 214
- Joined: 29 Nov 2011, 00:40
Great...aragorn wrote: ↑30 Oct 2019, 12:07Unfortunately, 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,
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">
...
PF12+, Quarkus 3.2+ (CDI, JPA etc.), JSF Bridge (MyFaces 4.0.1)
Dont forget the classifier:
Dont forget the classifier:
Code: Select all
...primefaces
<classifier>jakarta</classifier>
... theme
<classifier>jakarta</classifier>
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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.
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">
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 0 guests