gyc gyc - 3 months ago 14
CSS Question

bootstrap dropdown menu doesn't use available space and breaks on pull-right

My dropdown looks like this:

<a uib-dropdown-toggle class="tm-notification" href="">
<i class="tmn-counts" id="idItemNumber">666</i>
</a>
<div class="dropdown-menu pull-right dropdown-menu-lg">
<div class="listview">
<div class="lv-header">
A title here
</div>
<div class="lv-body c-overflow">
<div class="lv-item">
<div class="lv-title">
<div class="pull-left">Some very long text here</div>
<div class="pull-right">01-06-2016</div>
</div>
</div>
</div>
</div>
</div>


Which results in the
pull-right
div breaking to the next line.

enter image description here

I'm not sure how many of those css classes are standard bootstrap, but the
dropdown-menu
div's css has:

min-width: 300px;


If I add
width: 345px;
the result is correct but it's not dynamic anymore.
So I want dropdown-menu's width to depend on its content.

I tried to have all the data in 1 pull-left div

<div class="pull-left">Some very very long text here 01-01-2016</div>


The width reacts normally but then I don't have the date pulled right.

Answer

Try this

<a uib-dropdown-toggle class="tm-notification" href="">
    <i class="tmn-counts" id="idItemNumber">666</i>
</a>
<div class="dropdown-menu pull-right dropdown-menu-lg">
    <div class="listview">
        <div class="lv-header">
            A title here
        </div>
        <div class="lv-body c-overflow">
            <div class="lv-item">
                <div class="lv-title">
                    <div class="pull-left col-sm-7">Some very long text here</div>
                    <div class="pull-right col-sm-5">01-06-2016</div>
<div class="clearfix"></div>
                </div>
            </div> 
        </div>
    </div>
</div>