CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
ABMagil
ABMagil

Reputation: 5615

Bootstrap Popover With Multicolumn Display Not Expanding to Width

Bootply is here

I'm trying to use a multicolumn display in a bootstrap popover and the content seems to keep trying to fit the popover rather than the other way around. I've futzed with the width and max-width property to no avail. The biggest problems are noticeable (in the bootply) on the fieldset legends, where the last one gets cut off, and in the field labels, which are wrapping, rather than the popover getting larger to accomodate them.

Why won't the popover expand? I used to have another column and I removed it to get more space and instead the popover just shrunk to the new content.

Upvotes: 2

Views: 2875

Answers (3)

Jordan.J.D
Jordan.J.D

Reputation: 8113

If I understand your question correctly, you do not like that the popover has a column that scrolls off the edge (horizontally). The problem was that you did not put all of the rows and columns inside of a container:

Code (data-content for popover):

<div class='container-fluid'>
....
</div>

CSS: Changed max-width and removed width:auto

 .popover {
  max-width: 100%;

  overflow-y:auto;
  z-index:1000;
}

BOOTPLY DEMO

enter image description here

Bootstrap requires containers to wrap the grid system together, otherwise it will not format correctly.

If you want to get rid of the horizontal scroll bar remove the overflow-y:auto; CSS. - Thanks Shawn Taylor

Upvotes: 3

Shawn Taylor
Shawn Taylor

Reputation: 15740

I know this isn't exactly what you've asked ("why won't my popover expand"), but it does solve the overflow issue... just add this to your CSS:

.panel-legend{font-size:16px;}

Upvotes: 0

king_melly
king_melly

Reputation: 1

I noticed that the .popover class is restricted to max-width:276px; in the bootstrap.min.css. When you inspect the elements (in Google chrome) you can see this. I took a screenshot of what i meant.

link to screenshot: https://i.sstatic.net/zFpJA.png

If you can remove the max-width restriction you can set the width of .popover to a 100%.

I hope this help :)

EDIT###

if you change

.popover {
    max-width: 100%;

    overflow-y:auto;
    z-index:1000;
}

To:

.popover {
  max-width: 100%;
  z-index:1000;
}

.row {
   max-width:100%;
}

It should work :)

Upvotes: -1

Related Questions