Angular Bootstrap Navbar component position - html

Question

I have an angular page where I want a fixed nav bar on top. The title of the page on the left, some buttons in the middle, and a dropdown on the right. I'm using bootstrap and ui-bootstrap and I've got somewhat of a navbar going but I just can't get the dropdown to go to the right. It just stays in the middle no matter what I try. Here's a plunker reproducing my problem. I've tried text-align: right; and float:right; but nothing works!
Any idea what I'm doing wrong here? Or is there a good example that does what I want?

Answer 1

Try reversing the order of your center div and right div (order matters when floating) like so:
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<a class="navbar-brand page-scroll">Test</a>
</div>
<div class="navbar-header page-scroll navbar-right pull-right">
<div class="btn-group" uib-dropdown>
<button id="btn-append-to-single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu"
uib-dropdown-menu role="menu"
aria-labelledby="btn-append-to-single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
</ul>
</div>
</div>
<div class="float-center btn-group form-group row"
data-toggle="buttons">
<label ng-repeat="foo in ctrl.foos" class="btn btn-primary">
<input type="radio"
name="foo"> {{foo}}
</label>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Also, you probably want to give the parent element of your navbar-brand the float: left property so it doesn't span the entire width. And if you want to keep using relative positioning for your center element, you'll need to play around with the values. Left: -15% worked for me with the above changes.

Answer 2

What I can see from the plunker is the css below breaks the position of the dropdown list :
.float-center {
float: right;
left: -35%;
margin: 4px;
}
Two simple solutions could be done:
1. switch the position of the dropdonw button and the middle buttons, forked link here: https://plnkr.co/edit/HAAKWziKM3o6uBE6uZtq?p=preview
change the float from right to left and modify the value of left
Hope this can help you :)