sidebar - fa fa-angle-left pull-right inside treeview broken after update from 2.3.3 to 2.3.5

Firstival - thank you for you work!

I use newest cdnjs version of AdminLTE css, same thing happen in 2.3.4 . It looks, like this part is missing

.sidebar-menu li > a > .pull-right {
    margin-top: -7px;
    position: absolute;
    right: 10px;
    top: 50%;
}

And here’s the screenshot:

I can’t track myself what has changed. Best regards!

[michaelarnauts]

This can be solved by wrapping the icon in a <span class="pull-right-container">, and keeping pull-right on the icon itself. Actually, I think this is the recommended solution since the examples are also modified like this.

[ByteHunter]

I have the same issue and, indeed there is a part missing. In a recent mergue request #1006 the .pull-right class was replaced by .pull-right-container which I think has a little sense. If you don’t use multiple labels you may want to keep it simple by just specifying .pull-right to the <i> element.

The problem was reagarding a visual glitch in Firefox (which I could reproduce with my current browser’s version 47.0.1) where multiple labels are not being displayed correctly:

Solution

If you don’t use multiple labels consider this workaround (example of a fully dropdown menu):

<li class="treeview">
    <a href="#">
        <i class="fa fa-coffee"></i> 
        <span>Menu</span> 
        <i class="fa fa-angle-left pull-right-container"></i>
    </a>
    <ul class="treeview-menu">
        <li><a href="#"><i class="fa fa-circle-o"></i> Submenu 1</a></li>
        <li><a href="#"><i class="fa fa-circle-o"></i> Submenu 2</a></li>
        <li><a href="#"><i class="fa fa-circle-o"></i> Submenu 3</a></li>
    </ul>
</li>

Note that I added the -container to pull-right css class inside the Font Awesome icon.

And this will fix this visual glitch. Working expanded as well.

If you want to add multiple labels, with this change you have to do it enclosing all of them inside a .pull-right-container, like this:

<li>
    <a href="#">
        <i class="fa fa-coffee"></i> <span>Menu</span>
        <span class="pull-right-container">
            <span class="label label-success">10</span>
            <span class="label label-warning">20</span>
            <span class="label label-danger">30</span>
        </span>
    </a>
</li>

Which will produce:

However, if you still want all these features (dropdown’s caret and multi-label) consider enclosing them all in the .pull-right-container, like the following snippet:

<li class="treeview">
    <a href="#">
        <i class="fa fa-coffee"></i> 
        <span>Menu</span> 
        <span class="pull-right-container">
            <span class="label label-success">10</span>
            <span class="label label-warning">20</span>
            <span class="label label-danger">30</span> 
            <i class="fa fa-angle-left"></i>
        </span>
    </a>
    <ul class="treeview-menu">
        <li><a href="#"><i class="fa fa-circle-o"></i> Submenu 1</a></li>
        <li><a href="#"><i class="fa fa-circle-o"></i> Submenu 2</a></li>
        <li><a href="#"><i class="fa fa-circle-o"></i> Submenu 3</a></li>
    </ul>
</li>

The result will be:

I’m not a big fan of this change, since I personally didn’t use multiple labels. And single labels worked perfectly fine, as well as dropdown’s caret. If there is no way to easily fix this issue in Firefox, both css classes (.pull-right and .pull-right-container) should be kept to handle both cases and to not break all people’s implementations.