So I have two div elements on my page, one directly on top of the other. One has visibility:hidden and the other is visible. I have a button that swaps their visibilities, each time it is clicked the visible div is hidden and the hidden div becomes visible. The divs both have heights which require the browser to be scrolled vertically, however their heights are different. If I make the shorter one the visibile one, I can still scroll as far down as i would be able to if the taller one were visible. So when the shorter div is displayed, there is a bunch of empty space beneath it because you can scroll down far past it. How do I make it so the window will only scroll as far as it needs to display the VISIBLE content? Thanks.
use display:none instead of visibility:hidden. Then if you want to show the hidden div again, just use display:block.
visibility:hidden retains the space used by the div, it just doesn't render it. In contrast, display:none effectively removes the element completely, including the space it would normally occupy.
This ought to help you out. visibility: collapse hides the div completely, while still keeping it on the page. Having them both should solve your problem.
visibility: collapse;
display: none;
Related
Menu width is set to 80% and centered. What I would like to happen is for the menu to be as responsive as other page elements, i.e. adjust it's size/width until the screen is a specific size (say 1200px or so), then split in half. When the screen width hits 910px or below, the menu collapses into a hamburger. That works correctly. What doesn't work correctly is that the slightest adjustment in screen size causes one or more of the "li" items to drop down a row. Is there a way to force the "li" menu to split in half (after the 4th item) at a certain screen size? I have tried many different combinations of ul li:nth-child(4) a commands, but nothing seems to have any effect.
On the appropriate screensize, set the .nav li width: 25% and float: left. Make your .nav a display:block
Make sure you clear the floats with a clear:both element, or a clearfix on the container.
I take it you want the buttons to always be in equal rows?
A simple approach for just a single split would be to put the buttons in to two divs with display:inline set, and use nonbreaking spaces to separate the buttons. That way, there is no breakpoint within the div so insufficient width should force the whole second div onto a new line.
Or, I could suggest splitting the buttons into two divs with default display:inline css, and if a split is needed on the basis of viewport width, then change the display property of one to block with js. That will force the rest onto a new line. Not tried it but in principle it should work.
As an interesting alternative, you can it seems separate the items with br tags which have display:none set. In which case they do nothing. Changing that to display:block activates the br, forcing a newline. I'm not sure if this is approved css but it works in FF and Chrome.
Scary subject, BTW. Had me cowering under the desk. ;)
strong textSeems like a common problem, but in my case it's complicated by a few extra requirements, so what I found on SO and MDN didn't lead me to a full solution.
Simple premise:
Horizontal nav bar, full width of the page, semi-transparent background, variable number of tabs (extra space filled with same background as tabs).
Easy, right? Give the container element rgba background, set nav items display:inline or float them left and you're golden.
Complication 1: Active tab has to have a triangular cutout (see pic).
Ok, I can have a cutout by setting background-image to a png with transparent bit. The background of the parent element would get in the way - so set background to individual elements instead of parent.
What about the variable width "empty space" past the tabs (see pic)? Ok, put an empty element with a larger than life width, and cut it off with overflow:hidden on the parent.
Complication 2:
Buttons need tooltips on hover.
Ah, the thrill! The suspense! overflow:hidden won't do unless I put tooltips outside of nav div altogether (which would probably work - but seems smelly).
So, here are a few things I tried:
Old implementation which doesn't have the "filler" element width problem but clips off half a tooltip (with overflow:hidden):
http://codepen.io/istro/pen/aHcdi
Messing with display:table seems to give little control over how display:table-cell div width is decided, also needs content to display the div in the first place. Content can be moved away, but still no good (didn't even add a tooltip here):
http://codepen.io/istro/pen/uIcfn
Messing with floats (tooltip sorta where I'd want it to be more or less), but clueless how to make the last "filler" element fit remaining width:
http://codepen.io/istro/pen/aIGxB
So the question - how could I make a div to fill the remaining width with CSS only? Or perhaps I'm asking the wrong question altogether, in which case what ideas would I use to implement it cleanly?
Thanks!!!
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).
I've created a sample on jsfiddle
So if you try selecting the text and dragging outside of the box it will cause the outer div to scroll to display the hidden parts of the inner div, even though its set to overflow:hidden. This doesn't happen when I remove overflow-y:scroll from the inner div, but unfortunately I need that to be able to scroll so I've got to find some other way of fixing it.
Any ideas of how to prevent it from being scrollable on the x axis when selecting text?
EDIT: The issue also seems to be limited to webkit.
I am working on a site design in which the main content area is centered via margin: auto and has a fixed width.
I would like to place another element slightly outside of this fixed width (off to the right, in my case) without affecting the overflow scrolling of the center content area.
Perhaps this is better explained with an example: http://jsfiddle.net/rxje6/
In this example, try shrinking the bottom right pane and notice how the bottom scroll bar appears immediately after the orange goes out of view. Although this is the default behavior, this is not what I want. I prefer the scroll bar to only appear once the gray area is obscured and the orange to be hidden out of view.
I've tried absolute positioning, but the scroll bar still appears. Using overflow: hidden on the primary navigation div works, but simply chops off the overflowing orange.
Any help is much appreciated!
P.S. Stackoverflow's tag helper seems to be down at the moment, so I'm placing this under css for now since I can't think of any others.
One method is to wrap everything in a new div:
#container {
overflow-x: hidden;
min-width: 400px
}
See: http://jsfiddle.net/thirtydot/rxje6/1/