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.)
Related
How would you make an element go from position:absolute; to position:fixed; when parent is flexbox ?
Let me explain further: I have a very basic layout 100% flexbox based. The layout is just a left sidebar and a content area. In the content area lives a header which starts at 400px from the top and is absolutely positioned (in order to cover a hero section), the desired UX is to make this header sticky after it touches the top of the screen.
Here is a pen for illustration.
Now, I have the mechanism to programatically switch the header from absolute to fixed at a given scroll position, this is not a problem.
The problem is, when fixed:
1. the header covers the scrollbar to the right (real issue)
2. left side of the header has to be known in order to set the left: property (minor issue: I can live with it as my sidebar has a fixed width I can copy from).
I heard about a position:sticky which does the trick, but it seems not that reliable as not really well supported so far.
Of course I cannot know size of the scrollbars as it depends on each navigators... otherwise I would just do right:17px; or something like that. ;)
EDIT
The culprit of the "bug" forcing the header to overlap the scrollbar is the overflow:auto set on #content.
However, as the layout is flexbox based, I don't see how to avoid use of this approach as the sidebar is sticky by definition using basic flexbox. So an underlying question would be: How to stick an element within flexbox, USING FLEXBOX ? The position:fixed is clearly not compatible as it breaks the flow... Also, the obvious step would be to avoid flexbox and redesign the whole layout using classical positioning, but this is out of the purpose: the layout has to be compatible with react-native which ignores classic CSS positioning (uses flexbox only)... See here. (of course, react-native has another way to handle scrolling, hence the problem in web environments).
In order to proceed with my design, I had to make a decision and I went using position:absolute only, but adjusting my top property programatically (using react but could be implemented with Jquery or whatever technology able to know the current scroll position).
In pseudo-code, it would like :
//when scroll reaches 400px
if getScrollTopPostion() > 400
//recalculate top position of given element to equal current Scroll position.
//This gives the effect that the element is sticky. In reality it is just live recalculated...
//Quid of performances?? no idea
then setTop( getScrollTopPostion() )
//otherwise, let the element absolutely positioned at 400
else 400
Obviously, this does NOT answer the initial question.
The "official" answer would be to use position:sticky, but until it gets really spread across say 95% of browsers (particularly mobile ones...), I would say the proper answer is still to be found.
For fixing the 1st issue, try this:
#main #content #header {
position: fixed;
...
}
Remove the overflow: auto; property from #content. And also add align-items:stretch to #sideBar.
I'm trying to move the green box 10px outside of the top of its container. However, since .cover has an overflow of hidden, the top of the green box isn't showing. How can I show the green box without switching around elements in the DOM?
Sorry for the confusion and the lack of info. Also, if I take off overflow: hidden or switch it to visible, the container reduces to 0 height which then hides a vertical border (on the site I'm working on) that spans the height of the content.
https://jsfiddle.net/Lxbf45y0/1/
if I take off overflow: hidden or switch it to visible, the container reduces to 0 height which then hides a vertical border
Sounds like you're using overflow:hidden; to create a new block formatting context. Obviously the side effect is that you can't easily have any overflow. That MDN page I linked includes a list of ways to force a new block formatting context. One thing you can do is replace overflow:hidden; with display:inline-block; width:100%;. This demo uses that method: https://jsfiddle.net/sb40ha0n/
As pointed out by Roko C. Buljan, Clearfix methods might also be available to correct this issue.
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
This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using
margin: 0px auto;
In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.
I have two test pages currently uploaded:
Test 1 - This displays the Options div in the correct place (set using float: right;), but when I roll over it, the content wraps around the reiszed div.
Test 2 - This makes sure my div floats over my content, but it is set using position: absolute, and it remains at the top right hand corner of the page.
I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.
Test 2 would be perfect if you set position: relative; on the containing div and then added a spacer div that remained in the flow of the document: http://jsfiddle.net/sl1dr/GyvM4/
use z-index with absolute postion. Set the z-index to be higher than the content.
Try this fiddle
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
note I changed #options to options for re-use.
http://jsfiddle.net/7T2c6/ I got it with no extra DOM. However I did move the location of the anchor tag. Outer div no longer provides style, just spacing. Inner elements are position absolute and provide all style. Just my variant. :)
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. This will keep it in an absolute position but since it's not really specified, it will remain at the required location, causing it to overlap other objects. Play with margin to move it around.
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.