Bootstrap selector dropdown-menu.pullright not working? - css

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

From your screenshot, I would assume that you have used .btn-group class to make your white log in button.
Assign "pull-right" class to the div element containing btn-group class instead of the ul element.
Correct Html markup
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Profile</li>
<li class="divider"></li>
<li>Sign Out</li>
</ul>
</div>
Based on what I have analyzed on the twitter bootstrap, you will require the following css to work.
.navbar .pull-right .dropdown-menu, .navbar .dropdown-menu.pull-right {
right: 0;
left: auto;
}
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
.pull-right { float: right; }

Answer 2

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!