I have a div (it's a popup for an openlayers map, but it could pretty much be any fixed size div), that contains a jquery ui menu (which is wrapped in a ul). The menu doesn't fit inside the div very well, so I'd like to make the menu float above it so that as the menu grows I don't have to grow the size of the containing div. Is this possible?
The containing div is itself positioned absolutely, I've tried setting the ul that represents the menu to position:absolute;z-index:100 but that doesn't work. I've also tried setting overflow:visible with no joy.
This screenshot shows the issue I have:
I've added a jsfiddle that opens a popup when you click the small orange circle, and you can see that the menu inside there is bigger than the containing div.
If you tell me that my answer is not what you mean I will delete it cause I am not sure what you really need to do. You want this scrolls to disappear and if the text is bigger than the popup just to float over no matter it is going outline ?
If this is what you want you have to remove the overflow: auto from .olFramedCloudPopupContent and again to remove overflow: auto from inline style of the element #chicken_contentDiv (I am not sure that you add it with jQuery).
Related
Why is my div cutting off the content of its contained absolutely positioned div?
I am trying to get my twitter bootstrap popover to be "on top" of the containing div. As you can see below, the popover is being cut off.
Z-index
Popover is absolutely positioned, so figured I'd try increasing z-index. Didn't work.
overflow: visible
Then next I figured I'd check for all the containing elements having overflow set to something other than visible, but that also didn't change anything.
Is there some CSS attribute I'm forgetting to check?
I have a Jquery Dialog. Inside the dialog i have a DIV with a "Save Button". This DIV can have multiple buttons or dropdowns depending on the scenario. So it's actually a TOP Options Div.
Image Here:
I need to have this DIV always VISIBLE. Right now If the dialog content exceeds the dialog height then If I scroll down I lose the visibility of my options div.
Any clue on how to perform this?
Thanks a lot.
I suggest you put the rest of the dialog content into a div, to which you apply a fixed height and an overflow-y: scroll attribute.
height : 250px
overflow-y: scroll
So in fact it's not the whole dialog you will scroll up and down while the top div stays fixed, but the second div content while the top div just stays at its place.
Example : dialog with fixed top and scrolling content
Here's one approach:
http://jsfiddle.net/andromedado/Gq54S/
The assumption is that wrap around the "New User", "close", scrollable content and buttons pane is already position fixed.
From there, you just have to make the buttons pane also position fixed, and give it the appropriate width so that it doesn't overlap the scrollbars.
Finagling width vs. padding can be verbose, so I cheated in the script and just declared vars to hold the padding info.
I also added an element "buttonSpacer", which gets it's height from the floating buttons pane; this gives the floating content something to push against, so it doesn't end up underneath the buttons pane.
I have a main parent div that is .resizable(). One of it's child divs, say bottomChild has alot of other child div's, which resize as well. However, they have text and this text does not resize and so overlaps with other sibling div contents. What i want is for them to not resize, but for a scrollbar to appear so that the user can scroll through the bottomChild and see the content. I have a GridView in another child Div, say topChild, and this happens for the GridView automatically. I want to simulate this for bottomChild as well. Does anyone know how?
Heres a running sample - http://jsfiddle.net/xgCDy/33/
Try and resize the black parent div and see the content overlap.
I've solved your problem:
http://jsfiddle.net/WGknf/embedded/result/
just remove some extra code :D
http://jsfiddle.net/WGknf/
dont use relative(%) height. when you use draggable div!!!!
I have my menu working the way I want with the exception that menu elements are displayed from the top down as supposed to bottom up. I tried changing the CSS properties, but still can't get it working. I need my DIV container to be align on the bottom of the parent container. I used 'bottom: 0' CSS property but that doesn't have any affect using both 'position: absolute' and 'position: relative'.
How can I align all the elements within the parent DIV be displayed at bottom: 0 (bottom up)?
Then click on the Projects bottom link (refresh if you need to reset the menu items). I need that same behaviour I already have, just the menu items should start from the bottom up and be aligned all the way to the bottom.
Any suggestions?
Thanks,
Partizan
The best way to accomplish this is to either put the divs inside the sought after parent element. Ergo the <li> you want to associate these links with. Give the parent <li> a style of position:relative. The on hover set the position of the child div or li to abosulte and left:0;top:0;. Then from there you can style it closer or farther with margin.
Try using padding-top to push them down with an id or class on each sub menu.
Then if that fails, try using min-height: auto; on each parent.
Ah, yet another CSS issue I'm having.
I'm attempting to use custom buttons, replacing a LinkButton with an image. I have the button working, but now the content below the button is not being pushed down. Have tried various things, but can't seem to find the answer.
Here's a jFiddle: http://jsfiddle.net/3hm5W/
Basically, the div id = sampleForm (the white form box) should start 5px after the div class = action-buttons. Currently the white box contains the red button.
All of the contents of your action-buttons are being absolutely positioned, which takes them out of the normal flow and makes the container have 0 height. Either get rid of the absolute positioning, or specify a height for your action-buttons div.