I'm trying to create a multi-threaded navigation similar to OS X's column view:
In the markup here, I've got a list of lists sitting in a parent <nav> with a defined height. Then each li is floated left with a defined width and a height: 100%. Then I do the css triangle trick to make the little arrow, and position it hanging out into the next column with a positive z-index. So far, so good.
Column 2, however, is too long: I want it to scroll. When I assign that ul an overflow-y: auto, however, I get:
Wait a minute! Where'd all those scrollbars come from!? I didn't want scrollbars for x! But even when I set overflow-x: visible, it ignores it and gives me a scrollbar. This is, sadly, as specified. Is there a CSS workaround for this? Do I have to write some cranky JavaScript to react to the lists scrolling and reposition the arrows?
EDIT: added jsbin
Related
I have a dropdown that I would like to display properly outside of the container which has a horizontal scrollbar. It is currently "buried" inside the container.
See demo: https://codepen.io/lzhoucs/pen/EdYgXr
The container has a hard restriction of:
width: 300px;
overflow-x: auto;
My only requirement is that the solution should works with the horizontal scroll bar, and preferably no javascript.
See attempt 1: https://codepen.io/lzhoucs/pen/KGPNpb. This version sort of works when we don't scroll. It beaks as soon as we scroll.
See attempt 2: https://codepen.io/lzhoucs/pen/KGPNaE. This version breaks the scrollbar entirely
This article has a pretty good explanation of the issue and offers a workaround, although it still requires JS to properly position the submenus: https://css-tricks.com/popping-hidden-overflow/
But in your case it seems enough to just remove position:relative from .dropdown - https://codepen.io/anon/pen/KGPWEx
This is due to the fact that even absolutely positioned elements just assume the position they would have in normal flow, when the “coordinates” (top, left, ...) aren’t explicitly specified, but left at their initial default of auto.
(This won’t work though, if any of the ancestor elements further up the tree is positioned - like if you add position:relative for .container in your example, it breaks again. In such a case, I think you might have to go for the “full” workaround as outlined in the mentioned article.)
I have a parent element with a fixed height, with 2 child elements.
The first element is dynamic in height, according to its content (or collapsed nature).
I want the 2nd element to be as high as it can be, until reaching the end of the parent's height. The trick is, I want it to be scrolled if it has more content than its height.
Here is a Fiddle demonstrating this. Notice the 2nd section is cut - I'm trying to get it to scroll. Of course I can have overflow: auto, but I want only the child div to scroll, and not the entire parent.
I solved this with Javascript and it worked fine.
However, due to some glitches and animations, it didn't look all that smooth.
I tried searching for a CSS only solution, but nothing I did came close to solving this. Is there a way, or am I bound to dynamic calculations in JS ?
.parent {
max-height: 250px;
overflow: hidden;
}
Edit: Fiddle had incorrect link, fixed now.
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've done a bit of Googling and found a number of references to the problem I'm trying to solve, but all suggest the same solution that I can't use. The problem is that I have a sidebar floated right and some divs that need to expand to the width left over from the sidebar, but then expand to the full width when the sidebar is no longer preventing them from doing so.
The jsfiddle is here: http://jsfiddle.net/qdk3n/
The solution found elsewhere is to apply overflow: hidden; to the .left items. This achieves exactly the effect I want: divs that share horizontal space with the sidebar only expand as far as the sidebar, but additional divs expand to the full allowed width. Unfortunately, there will be an absolutely positioned item inside the left divs that exceeds the size of the div and will get cropped if I apply overflow: hidden;, so I can't use that. Is there any way to accomplish what I'm trying to do without using overflow: hidden;?
Note: I don't know the size of either the sidebar or any of the left divs prior to page render time, and I cannot use Javascript in any way, shape, or form (since this is meant to work for users with JS disabled). The only dimension I can set in all of this is the width of the sidebar; the divs need to be fluid and I can't arbitrarily choose some number of them to only extend part of the way.
Also note: I've seen this: Div stretch then wrap around other floated div. It is exactly what I'm trying to do, but the only real solution is the overflow: hidden; property, and I can't use that.
Unless i missed something, i don't think it is possible to achieve exactly what you ask for.
The reason overflow: hidden; changes the behavior of the (display: block;) elements is something called "Block Formatting Context", which you can read about here;
https://developer.mozilla.org/en/CSS/block_formatting_context
http://www.communitymx.com/content/article.cfm?cid=6BC9D
Technically, you can keep the elements display: block; and have them respect the floated sidebar, by floating your left divs as well, but this will unlikely have the effect you want.
However, any inline content inside your left divs are going to respect the floated sidebar, so i don't really see the need for the divs to behave like you describe (maybe elaborate on your reasons behind it to get more constructive feedback).
Problem part 1: Basically I have the age-old IE problem of overflow: hidden; not working in IE. The fix (which does work, admittedly) is to also add "position: relative;" to the element/parent; however this causes a problem for me. Firstly I want to know if there's another way without appending position relative.
If this is the only solution though, I'll outline the problem it causes:
Problem part 1b: I'm using jquery 1.4.2 and jquery ui 1.8.4. The concept is basically for the user to pick up a card (draggable li item) from the pile (ul surrounded by div) and place it into the appropriate category (initially empty ul items). Because positioning each card on top one another in the pile with css with position: absolute; would cause problems with the interaction, I've let them all display one after eachother in a column and used a div of set height and width with overflow: hidden to obscure the rest of the cards instead. Works great in FF, but in IE doesn't work due to the overflow: hidden bug. If I put in position: relative, for both browsers the z-index of the card when it is dragged appears to be behind everything outside of its parent div. I've tried changing the z-index on every element on the page to specify the order, but this appears to be disregarded entirely. I'm really hoping not to have to get into the jquery to make changes. Any solutions?
Attached are pics which make this wall of text a little clearer. Picture 1 is how it should work and does in FF without position relative. Picture 2 is when position relative is added to the mix. Both pictures show a card being dragged to a position in a new column.
Picture 1: http://plldd.net.au/storage/overflowhidden.jpg
Picture 2 is at the same location and is called positionrelative.jpg
Thanks for any help you can offer.
can you try wrapping it all in another div with position relative? This div surrounding everything instead of the immediate parent.