I am trying to create a drop-down menu for a web application using only angularjs and ui-bootstrap. The menu is similar to what you see in the desktop application, the menu should display a left aligned label, and the text of the hot key reminder should be right and on the same line. I am looking for something like this:
http://imgur.com/WevtfId
Drop-down buttons should also be built-in elements sitting on a toolbar, such as a configuration. I am creating a reusable component when each drop-down menu is supported by an object, so the width of the menu should scale so that the length of the long line in the drop-down list.
Here are some examples that I put together in the plunker: https://plnkr.co/edit/RAMgcuVoibeLkHTz4Z3e?p=preview
Example 1.A shows the main problem. When the first range in the drop-down list is longer, it shifts the second range to the next line.
<span class="example-inline" uib-dropdown>
<button type="button" class="btn btn-primary" uib-dropdown-toggle>
A. Autowidth Dropdown
</button>
<ul class="dropdown-menu" uib-dropdown-menu>
<li ng-repeat="item in ctrl.items">
<a>
<span style="float:left">{{item.label}}</span>
<span style="float:right; padding-left: 15px;">{{item.hotkey}}</span>
</a>
</li>
</ul>
</span>
Example 2.A has a drop-down menu that behaves correctly. Unfortunately, I had to attach the uib-dropdown directive to a block element, which means that it will not sit well on the toolbar without additional work.
<span class="example-block" uib-dropdown>
<button type="button" class="btn btn-primary" uib-dropdown-toggle>
A. Autowidth Dropdown
</button>
<ul class="dropdown-menu" uib-dropdown-menu>
<li ng-repeat="item in ctrl.items">
<a>
<span style="float:left">{{item.label}}</span>
<span style="float:right; padding-left: 15px;">{{item.hotkey}}</span>
</a>
</li>
</ul>
</span>
.example-block {
padding: 5px 20px;
display: block;
}
In example 1.D, I put the table in the drop-down menu. This gives me the behavior I want, but will include more refactoring of my pre-existing functions.
<span class="example-inline" uib-dropdown>
<button type="button" class="btn btn-primary" uib-dropdown-toggle>
D. Nowrap Table in Dropdown
</button>
<ul class="dropdown-menu" uib-dropdown-menu>
<table style="white-space: nowrap;" class="dropdown-table">
<tr ng-repeat="item in ctrl.items">
<td style="width:90%">
{{item.label}}
</td>
<td style="width:10%">
{{item.hotkey}}
</td>
</tr>
</table>
</ul>
</span>
Is there a cleaner solution here? I would prefer something like 1.A with a few CSS settings. If necessary, I would like to avoid a lot of refactoring. Thank!