Kevin Vasko Kevin Vasko - 3 months ago 33
CSS Question

How to allow bootstrap dropdown item list to display outside of the class="well"

This issue stems from this issue. Dynamic width of a bootstrap 3 button to stay in col-md-* with long label on button

Here is the example of the issue.

http://codepen.io/anon/pen/ORJagG

HTML

<div class="container-fluid">
<div class="row">
<div class="col-md-1">
<div class="well well-lg">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle hideOverflow" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This is some really really really really really really test really really really long text<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">some button with really long text</a></li>
<li><a href="#">some button with really long text</a></li>
<li><a href="#">some button with really long text</a></li>
<li><a href="#">some button with really long text</a></li>

</ul>
</div>
</div>
</div>
<div class="col-md-1">
<div class="well">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle hideOverflow" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This is some really really really really really really test really really really long text<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Should work like this but in the well...</a></li>
<li><a href="#">some button with really long text</a></li>
<li><a href="#">some button with really long text</a></li>
<li><a href="#">some button with really long text</a></li>
</ul>
</div>
</div>
</div>
</div>




.hideOverflow
{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:100%;
display:block;
}

.btn-group{
display:block;
}

.well-lg{
overflow:hidden;
}

Answer

(Adding comment as answer in case it may help someone out in the future)

You can adjust the min-height on .well and remove the overflow on .well-lg.

.well {
  min-height: 85px;
}

Here's the pen: codepen.io/anon/pen/BLaGVB