I'm using Primefaces 5.3, and AdminLTE 2 as a template for my website (Which based on bootsrap).
The problem is when I open a dialog box, this dialog gets hidden by the top navbar, and this topbar doesn't get disabled I can still click on its links.
[![enter image description here][2]][2]
As you can see in that picture a portion of the dialog box is hidden by the top nav bar.
How can I solve this problem ?
Without a sample code to work and check your issue. Here is a probable solution that i can suggest to you. Check the z-index of the navbar and the dialog. Try setting z-index for both where the dialog box z-index value is greater than the navbar.
Related
I've been trying to programmatically scroll a list (accordion) in an Ionic-Angular app and I’ve been having no success at all.
I reproduced it in this stackblitz: https://stackblitz.com/edit/stack-overflow-ionic-scroll-problem?file=src/app/home/home.page.ts
When you click on an item, it expands and I want it to align to the top of the screen (with the title visible). In this example, I am using scrollIntoView() to get it to the top but it disappears behind the toolbar.
I've tried many things to get it to align properly (including setting a "scroll-margin-top" as suggested on many posts) but this hasn't worked for me.
Also, I can't seem to be able to use the scrollBy() or scrollTo() method... they do nothing at all.
Can anybody help me figure this out and get this precise example to work? Thanks in advance!
The problem is in the property [fullscreen]="true" of the <ion-content> tag.
The property fullscreen of ion-content, according to the ionic documentation...
If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
In ionic when you use the option fullscreen as in <ion-content [fullscreen]="true"> it adds the following style to the ion-content tag:
--offset-top: 56px;
The goal of the [fullscreen]="true" is to create the effect of the content scrolling behind the header.
As a side effect, part of the <ion-content> is hidden behind the <ion-header>.
Fullscreen property and scrollIntoView()
According to w3schools...
The scrollIntoView() method scrolls the specified element into the visible area of the browser window.
So, in your code, when you call scrollIntoView() of a group it is working exactly as expected. The screen is scrolled until the top o the group is into the visible area of the browser. The problem is that the <ion-header> is covering part of the top of this visible area.
Solution:
If you remove the [fullscreen]="true" of the <ion-content>tag the scroll will work as you expect.
But you will loose the effect created by the fullscreen property (content scrolling behing the header).
References
Fullscreen property of ion-content tag:
https://ionicframework.com/docs/api/content
ScrollIntoView:
https://www.w3schools.com/JSREF/met_element_scrollintoview.asp
I add a vuetify drawer to my application, and set the position to fixed and temporary.
When the drawer is open (and I have overlay), when I try to scroll the drawer stay in position - good. but the problem is the event pass to the page, and the page is do scroll.
How can I fix that?
My code on codesandbox.
open the link
click on toggle and the drawer is open.
try to scroll (with the mouse)
if you do, it's bad.
Your problem is that you give the wrapper div height:3000px.
you have to set it to height:100vh - in this case it will take the maximum height of your screen (like 100% of it)
I'm using Minton Template (http://coderthemes.com/minton_2.1/blue_hori/index.html)
As you can see from the image above, the top of datepicker being blocked by the fixed header menu. It seems the datepicker not automatically being placed at the bottom of the input field.
This is the JS code that I used.
jQuery('#date-range').datepicker({
toggleActive: true
});
This happen on smaller screen. Bigger screen display correctly with the datepicker placed at the bottom of the input field as image below.
I dont want the menu blocks the datepicker. Please help.
check the z-index of datepicker. the z-index in the css should be greater for the datepicker class than for the menubar.
check this link for more information about z-index
I am having a popup page,in that page i have a select box, which i have applied jquery UI selectmenu. The problem is that the selectbox is in the bottom of the popup, and when it gets open, it get out of the popup limits.
My actual code (I cannot paste here my code for security reasons) has:
The z-index of of the select box is bigger compared to pop up container´s one, so its rendering on top of the pop up with no-issues.
The z-index for the select box is in relative with the pop up,not with the whole page,so the select box is hiding behind the pop-up when
the pop up height is less.
The desired behaviour is when popup height is less than needed to show all the select box. I need to show the select box without hiding.
If i did not apply jquery ui select menu, it´s working as expected.
Please find the below images for reference.
1.When having enoug popup size.
2.when popup size is less ,select is hiding.
3.What i am expecting.
Please suggest me what i can do to solve this.
Add CSS property overflow-y:visible on the main popup div:
This will make the inner content that is outside the main div top/bottom bounds to be rendered.
popupSelector {
overflow-y: visible;
}
Here is the documentation about overflow-y
I'm wondering whether I can use the "same" icon (or something that looks the same) that triggers a full-screen, semi-transparent Bootstrap modal (that I have customized) to pop up and then close it with an icon that is in the same location.
However, say it is initially a hamburger icon on the normal page, when I click the icon to pop up the modal menu, it is now under the modal. Is there a way to have it stay on top of even a modal? I tried z-index but I couldn't get it to work.
The tricky thing for me is that I wanted to have the icon transition from a hamburger to an X and then vice versa when it closed: http://sarasoueidan.com/blog/navicon-transformicons/
Initially I was hoping I could get the icon to transition and then somehow set the icon to layer on top of everything, including modals.
Any ideas or suggestions would be great, thank you.
It should be possible to do this with z-index. However, z-index only works with elements that have "position" set to something other than "static" (the default). Try adding position: relative to your open / close button and hopefully then you should be able to use z-index to keep the button in front of the overlay.
There's a good reference with more info about z-index on CSS Tricks.