Menu
I am trying to implement a slider for my gallery. Right now,the css has an issue where the overflow-x doesnt work properly. (I want a horizontal slider and no vertical scroll)
Here's the fiddle:
Please do take a look.
.testimg{ height: 100%; width: 100%; } #testDiv{ width: 400px; overflow: auto; float: left; overflow-y:hidden; border:1px solid black; } .testimgdiv{ width: 120px; height: 100px; float: left; } 
692
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.
The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges.
Once you've floated the elements, you've taken them out the document flow and it won't be calculated in the parent's width. You have to use a combination of display: inline-block on the items instead of float, and then use white-space: nowrap on the parent.
#testDiv{ width: 400px; overflow-x: auto; border:1px solid black; white-space: nowrap; font-size: 0; } .testimgdiv{ width: 120px; height: 100px; display: inline-block; } Fiddle
Note: I'm using font-size: 0 to make the items appear right next to each other.
UPDATE
As this post is quite old, it's probably worth noting that this can be done with less code using flexbox (depending on the browser support level required):
#testDiv { width: 400px; display: flex; overflow-x: auto; } .testimgdiv { width: 120px; height: 100px; flex: 0 0 auto; }<div id="testDiv"> <div class='testimgdiv'> <img class="testimg" src="https://picsum.photos/100/100/" /> </div> <div class='testimgdiv'> <img class="testimg" src="https://picsum.photos/100/100/" /> </div> <div class='testimgdiv'> <img class="testimg" src="https://picsum.photos/100/100/" /> </div> <div class='testimgdiv'> <img class="testimg" src="https://picsum.photos/100/100/" /> </div> <div class='testimgdiv'> <img class="testimg" src="https://picsum.photos/100/100/" /> </div> <div class='testimgdiv'> <img class="testimg" src="https://picsum.photos/100/100/" /> </div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
