I have a drop-down menu whose horizontal location depends on the width of the browser's window, and O can't find the way to get it open under the button with the left border aligned to the left border of the button.
Here is the HTML:
<td class="navbar-brand navbar-left" style="width:48%;margin:0;padding:0;text-align:center;margin: 8px 0 0 0">
<div class="dropdown">
<button class="dropdown-toggle" role="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-globe"></i> <label>{{Current_Language_Record.Code}}</label>
</button>
<ul class="dropdown-menu" style="padding:10px;left:0;width:250px" role="menu">
<li href="#"
ng-repeat="One_Entry in Interface_Languages_List | IF_Lang_Filter: Current_Language_Record.Code track by $index"
ng-click="New_Set_Language(One_Entry);"
style="cursor:pointer">
{{One_Entry.Code}} - {{One_Entry.NativeName}}
<hr ng-if="!$last">
</li>
</ul>
</div>
</td>
I tried adding the classes dropdown-menu-right and dropdown-menu-left but they don't show to have any effect. Also tried pull-right (which did the trick with another button I have) with no effect either.
Could anyone suggest what is it that I'm doing wrong?
Many thanks!
Related
I added a new menu item to a navbar, but now when resizing smaller, the top Account menu item in yellow(see screenshot)(the div with 'navbar-right-container' in the HTML) moves down into the main navbar. If I resize even smaller, the hamburger icon shows up. I want the hamburger icon to show up before the top menu item overlaps into the other navbar. Below is a snippet of the HTML. I tried adding padding to the body as suggested by other posts but that did not work. How can I get the hamburger icon to show up before it overlaps? Thanks.
<div id="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-expand-background">
</div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
</div>
</div>
<div class="navbar-collapse collapse">
<div class="navbar-middle-container">
<ul class="nav navbar-nav navbar-middle">
<li>
<a href="javascript:openModalAction('/Manage/Accounts')" class="navbar-account-switch">
<span>Account:<br />My Account</span> <span class="caret caret-right caret-collapsible"></span>
</a>
</li>
<li class=" nobr">
<a href="/" title="My Dashboard" >
DASHBOARD
</a>
</li>
<li class=" dropdown nobr">
<a href="/Quotes" class="dropdown-toggle" data-toggle="dropdown">
ACCOUNTS
<b class="caret caret-collapsible"></b>
</a>
<div class="dropdown-menu dropdown-menu-multicolumn ">
<div class="dropdown-menu-head"><div class="dropdown-menu-head-border"></div></div>
<table class="table table-condensed">
<tr>
<td>
<ul class="dropdown-menu-col">
<li class="nobr"><div class="dropdown-menu-col-header">MANAGE</div></li>
.......................................<div class="navbar-right-container">
<ul class="nav navbar-nav navbar-right">
<li class=" dropdown nobr">
<a href="/Quotes" title="Manage Account" class="dropdown-toggle" data-toggle="dropdown">
My name
<b class="caret"></b>
</a>
My Navbar
It is hard to presume without a working example. But almost certainly you should add some to your CSS breakpoint. Add 12em or 200px. Or make an entirely new breakpoint to focus specifically on that element.
You could resort to hacky tricks like negative margin width to offset the new element's impact on the layout. This may affect your ability to click and require even more rules.
Using bootstrap I'd like to show combobox which should expand and show its items into visible part of web page.
Given following snippet:
<div class="row">
<div class="col-xs-5">I contain long label</div>
<div class="col-xs-3"></div>
<div class="col-xs-4">
<div class="dropdown">
<button class="btn btn-default btn-block dropdown-toggle" type="button" data-toggle="dropdown">
<span>Options</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>This is very long text which normally overlays box on right</li>
</ul>
</div>
</div>
</div>
jsfiddle here
When dropdown button is expanded it overflows on right side and causes scrollbar to show.
How it would be possible to utilize free space on left side - e.g. make <ul> and <li> overflow original combobox header on other side and so prevent scrollbar to appear?
Just add class dropdown-menu-right to your ul item like
<ul id="migratorAvailableBuildings" class="dropdown-menu
migratorDropDownRight dropdown-menu-right"
Fiddle
adding .pull-right to ul.dropdown-menu should do it, updated fiddle http://jsfiddle.net/hku8a8nf/3/
Trying to do something very simple here:
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul ng-repeat="name in Ids" class="dropdown-menu">
<li>
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
I can't see why this isn't working: if I attempt to simply render an unordered list then the data is displayed correctly. But as soon as I try to include it in bootstrap's dropdown menu, the button is displayed but not expanded when clicked.
Why are you doing ng-repeat on the ul element, it should be li element, otherwise you're creating multiple lists.
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="name in Ids">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
Your code says to repeat the <ul> element, but don't you want to repeat the <li> elements? This should work:
<ul class="dropdown-menu">
<li ng-repeat"name in IDs">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
If you still have problems, I'd suggest you confirm your module is using the ui.bootstrap components. There are working examples of the dropdowns doing exactly what you want here on the documentation page.
I need to display the submenu to left align as right align making my layout messy. I'm using bootstrap.
<div class="btn-group">
<div class="dropdown">
<a href="#" data-toggle="dropdown" class="btn">
<i class="icon-folder-close"></i> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Outbox</li>
<li>Trash</li>
</ul>
</div>
</div>
Bootstrap has the option to make drop downs positioned out to the right. You can see an example of this on the bootstrap navbar section.
If you add the class navbar-right to your btn-group you should find that the dropdown changes drop direction.
<div class="btn-group navbar-right">
<div class="dropdown">
<a href="#" data-toggle="dropdown" class="btn">
<i class="icon-folder-close"></i> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Outbox</li>
<li>Trash</li>
</ul>
</div>
</div>
Here is a JSFiddle
I do not understand how I can hide a form in html without enlarging the other element. This is a dropdown menu with a html form hide:
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Language <i class="icon-angle-down"></i> </a>
<ul class="dropdown-menu" style="background:#a2a2a2">
<li>
<form id="form-ItemIDLangID" action="ItemView.php" method="post">
English
<input type="hidden" name="itemPOST" value='itemID'>
<input type="hidden" name="langPOST" value='langID'>
</form>
</li>
...
</ul>
and this is the result:
without the form:
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Language <i class="icon-angle-down"></i> </a>
<ul class="dropdown-menu" style="background:#a2a2a2">
<li>
English
</li>
...
</ul>
this is the result:
I can't understand how I can use the form and not have that enlarged effect in the first image, I want it to look like the second image, how I can solve it?
First, you have invalid HTML. An LI can only be the sibling of other LIs. [Update: I wasn't seeing the UL that was WAY offscreen. My mistake.]
Then, you probably have styles on your form that cause the gray space in your image--something like form {margin-bottom: 15px;}. Without your CSS or a demo it's impossible to say.