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
Related
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 have a dialog box in my application which displays a list of cards. I made a jsbin simplified version of it
http://jsbin.com/qopocej/edit?html,output
If I click on the blue outline on any of the cards a nice dialog box pops up with a short menu item in it. Particularly click on the blue outline below 'Joe' and see how the dialog box covers the current card and those surrounding it.
I need to refactor the code so that this current element in each card action is a new custom element, which brings with it all the functionality of displaying the menu dialog box. In the real application this does some ajax calls to the serve to update information.
The problem I have is that the very fact of refactoring has destroyed the way the dialog box displays. This is shown is this jsbin
http://jsbin.com/vecoxuh/edit?html,output
Click on the red box under 'Joe' and see how the dialog box is above the current card, but slips under the other cards nearby
I assume it is something to do with "stacking context", since the explicit styles that has added a z-index to each of the two dialog boxes should imply it still works, but it doesn't
The .item with an active dialog needs to be set a z-index that's higher than its siblings. The child dropdown menu's z-index is relative to that of its parents, no matter what it's explicitly set to. So if the furthermost parent does not have a z-index that enables it to overlap the other cards, none of its children will be able to do the same.
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.
I've got div with overflow="scroll" on it, which is displaying content (icefaces app). I've got event for right mouse button with displaying context menu of element of this content, but context menu is displaying inside of this div, i must scroll to see this context menu. This context menu is hidden div - after mouse click it's set to visible.
It's physically putted inside of scroll panel (and it unfortunatelly must be inside). Anyone have idea how to resolve this problem (i tried everything from google). Maybe some js trick or something like that? ;)
Problem is that i need it out of this scroll ;)
Thanks a lot.
Matthew
I'm working on a phonegap app that has a fixed sidebar behind the page and I found an behavior issue.
The sidebar is hidden, the user can see it with a tap on a menu icon. When the user tap on he icon the page go to the right and it shows the sidebar that is in a minor z-index.
If the user want to close the menu he have to drag the visible part of the page to the left.
My problem was that in the sidebar I have a block that is vertically scrollable. It works fine but the thing is, if I put the .scroll (overflow-y: scroll; -webkit-overflow-scrolling: touch;) class in this element and the user swipe horizontally from right to left over it the sidebar and the page start a drag.
We're using snap.js for the sidebar interaction.
I want to disable this drag. I tried with CSS and preventing horizontal scroll but it doesn't work.
I attach a pic for more visual details.
Use iScroll5 for scrolling.
Then hook into the onScrollStart event:
myScroll.on('beforeScrollStart', function(event)
{
if (isPanelOpen){
myScroll.disable();
}
else{
myScroll.enable();
}
});
Or - if you not wanna use iScroll5, you can set a global bool, which indicates, if a panel is open (you've gotta do this anyway).
If a Panel is open (meaning, you're showing the sidebar) set the bool to true in snap.js - this subsequently means, you've gotta tweak snap.js.
Then, on touchmove, check the bool if it is true. Then you know, a panel is open, and you can do a event.stopPropagation on touchmove in order to prevent the event bubbling up to get recognized by snap.js and avoid the panels closes too early.
Woop! We found it!
The problem was that we're catching the touchmove event for each element with .scroll class and we're stoping the propagation of it.
We had notice that when we tried to start a horizontal scroll all page was moving like a drag so we added this CSS property:
html, body, .ui-mobile .ui-page-active { overflow-x: hidden; }
And...it works fine!
P.S. we don't actually need the horizontal scroll in any element, so, this is fine for us.