css overflow x not working

Question

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>

JPeG · Accepted Answer · 2016-08-05 19:11:48Z

1

If you want it to be scrollable then you will need to do:

overflow-x: scroll;

answered Aug 5, 2016 at 19:11

JPeG

8216 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LeonardoGuimaraes Over a year ago

Hi, Thanks for your attention! But i am not looking for scroll, i just want to hide!

JPeG Over a year ago

Ahh, I think I know what you are looking for. Your problem is that your popover is not showing up cause your overflow is covering it. Correct?

David Chelliah · Accepted Answer · 2016-08-05 19:32:31Z

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>

Starfs · Accepted Answer · 2016-08-05 19:14:10Z

0

I believe you are looking for overflow-x: scroll;

answered Aug 5, 2016 at 19:14

Starfs

5181 gold badge9 silver badges21 bronze badges

1 Comment

LeonardoGuimaraes Over a year ago

Hi, Thanks for your attention! But i am not looking for scroll, i just want to hide!

Collectives™ on Stack Overflow

css overflow x not working

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related