Menu
I am trying to put multiple divs (image -> black blocks) in a container (image -> blue block). I need to put the maximum divs as possible in the container. The container have a "floating" width, so it has different sizes in each screen. The "1" (in the image) represents what i have today, it is working.
The problem is that i am using bootstrap popover in the entire site, but the overflow in the container does not allow it to appear. If I remove the overflow property ("2" in the image) all divs appear in a "lower" line. I do not want to scroll, just hide the divs that does not fit in the container.
The "3" in the image represents what I want.
Here is my codes:
// CSS
.content-bar{
max-width:100%;
height: 3.5em;
white-space:nowrap;
display: inline-block;
overflow-x: hidden;
overflow-y: visible;
}
.photo-bar{
width: 2.5em;
height: 3.5em;
margin-right: -.55em;
padding: 0;
display: inline-block;
white-space: normal;
}
// JS
<div class="content-bar">
<div class="photo-bar" ng-repeat="...">
// image goes here
</div>
</div>
447
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.
Definition and Usage. 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. Tip: Use the overflow-y property to determine clipping at the top and bottom edges.
This feature is non-standard and should not be used without careful consideration.
overflow: hidden With the hidden value, the overflow is clipped, and the rest of the content is hidden: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
If you want it to be scrollable then you will need to do:
overflow-x: scroll;
Option 1: You can remove the overflow properties from your styles. And the popup will appear as expected. Applying properties inline resolves the issue in the Code snippet check out the snippet shown below.
Option 2: IF Feasible for your case : You can use overflow hidden, but you need to have padding-top for the ".content-bar" class. The padding top should be the height of the popup.
// CSS
.content-bar{
max-width: 100%;
height: 3.5em;
white-space: nowrap;
display: block;
overflow-x: scroll;
/*overflow-y: visible;*/
}
.photo-bar {
width: 2.5em;
height: 3.5em;
margin-right: -.55em;
padding: 5px;
display: inline-block;
white-space: normal;
background-color: lightblue;
border: 1px solid;
}<div class="content-bar" style="white-space: nowrap;overflow-x: scroll;">
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</div>
<div class="photo-bar">
<img src="http://placehold.it/50x10" />
</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
