Question

The Bootstrap .dropdown-menu.pull-right selector doesn’t seem to work (the code is in navbar.less, lines 330 to 341).

As you can see on this screenshot, the up caret is not aligned to the right.

My dropdown-menu class :

<ul class="dropdown-menu pull-right">

When I change line 286 to

right:10px;

it works fine.

Any idea on how to fix this ?

Here is my html code:

      <div id="USE_dropdown_signin" class="btn-group pull-right">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="icon-user"></i> Sign in
        </a>
        <ul class="dropdown-menu pull-right">
          <form action="" method="post" accept-charset="UTF-8">{% csrf_token %}
            <input id="USE_signin_username" type="text" name="signin[username]" size="30" placeholder="User Name"/>
            <input id="USE_signin_password" type="password" name="signin[password]" size="30" placeholder="Password"/>
            <input id="USE_signin_remember_me" type="checkbox" name="signin[remember_me]" value="1" />
            <label id="USE_signin_remember_me_label" class="string optional" for="signin_remember_me"> Remember me</label>
            <input id="USE_signin_submit" class="btn btn-primary" type="submit" name="commit" value="Sign in" />
          </form>
        </ul>
      </div>

Answer 1

Here is what I didn’t understand:

1) The boostrtap selector in navbar.less line 329-330

    .navbar .nav.pull-right .dropdown-menu,
    .navbar .nav .dropdown-menu.pull-right {}

didn’t match my dropdown-menu because I don’t have the parent .nav class in my hierarchy.

2) My .dropdown-menu has the class .pull-right, and this doesn’t match:

    .navbar .dropdown-menu:before .pull-right {
     left: auto;
     right: 9px;
    }

but this does:

    .navbar .pull-right .dropdown-menu:before {
      left: auto;
      right: 9px;
    }

3) I couldn’t debug correctly until I removed the -yui-compress option of the less compiler 😉

Thanks for everything!