When the layout is utilized on a phone, and a sticky menu is used ( https://www.primefaces.org/showcase/ui/ ... icky.xhtml ) then scroll down, the menu overlaps the menu button.
Is there a way to get the sticky menu to stick below the topbar ?
sticky menu overlaps hamburger menu when on phone
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.
Hi,
I tried your said. I don't see any issue about menu overlaps .
This is my mobile screenshot :
https://ibb.co/ht3j39
Could you share your sample code and screenshot or video?
Greetings,
I tried your said. I don't see any issue about menu overlaps .
This is my mobile screenshot :
https://ibb.co/ht3j39
Could you share your sample code and screenshot or video?
Greetings,
Here is the screen shot: https://ibb.co/cyc0BU
Inside of paradise-1.0.3/sample.xhtml
I added:
<ui:define name="content">
<h:form>
<p:toolbar id="tb">
<f:facet name="left">
<p:commandButton type="button" value="New" icon="ui-icon-document" />
<p:commandButton type="button" value="Open" icon="ui-icon-folder-open"/>
</f:facet>
<f:facet name="right">
<p:commandButton type="button" title="Save" icon="ui-icon-disk"/>
<p:commandButton type="button" title="Delete" icon="ui-icon-trash"/>
<p:commandButton type="button" title="Print" icon="ui-icon-print"/>
</f:facet>
</p:toolbar>
<div style="height:200px"></div>
<p:sticky target="tb" />
<div class="ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<div class="card card-w-title">
Inside of paradise-1.0.3/sample.xhtml
I added:
<ui:define name="content">
<h:form>
<p:toolbar id="tb">
<f:facet name="left">
<p:commandButton type="button" value="New" icon="ui-icon-document" />
<p:commandButton type="button" value="Open" icon="ui-icon-folder-open"/>
</f:facet>
<f:facet name="right">
<p:commandButton type="button" title="Save" icon="ui-icon-disk"/>
<p:commandButton type="button" title="Delete" icon="ui-icon-trash"/>
<p:commandButton type="button" title="Print" icon="ui-icon-print"/>
</f:facet>
</p:toolbar>
<div style="height:200px"></div>
<p:sticky target="tb" />
<div class="ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<div class="card card-w-title">
I tested your code with paradise-1.0.3.
Screen :
https://ibb.co/cEsZap
What is your PF version? I tested with PF 6.2.
And Which are you using the browser and version?
But I tested chrome, firefox and internet explorer.
Screen :
https://ibb.co/cEsZap
What is your PF version? I tested with PF 6.2.
And Which are you using the browser and version?
But I tested chrome, firefox and internet explorer.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
@huseyinT, please scroll to the bottom of page. Does it work for you?
Github Profile: https://github.com/mertsincan
@smore,
you could add this code in the sample.xhtml:
you could add this code in the sample.xhtml:
Code: Select all
<style type="text/css">
@media (max-width: 960px) {
.ui-sticky {
top: 105px !important;
}
}
</style>
That seems to fix the issue. But I prefer it with a top of 55px.
Code: Select all
<style type="text/css">
@media (max-width: 960px) {
.ui-sticky {
top: 55px !important;
}
}
</style>
https://ibb.co/gNGSgU
According to my test and screenshot, it looks good.
Is there any issue? Because I don't see, tell us, please.
According to my test and screenshot, it looks good.
Is there any issue? Because I don't see, tell us, please.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 0 guests