I am using Bootstrap but I don't know why the dropdown menu is in the middle-left.
Screenshot:
Code:
<td><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" >
<li class="dropdown">Edit</li>
<li class="dropdown">Delete</li>
</ul>
</td>
Wrap your code within <div class="dropdown"> (Example)
<td>
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" >
<li class="dropdown">Edit</li>
<li class="dropdown">Delete</li>
</ul>
</div>
</td>
Related
In the following code I use the first bootstrap dropdown to list a selection of items to show. Selecting one creates a bootstrap nav bar with two input fields, a check in field, another dropdown button and two additional buttons. I've put it together like you see in the below example.
The problem is the selection I make in the first dropdown appears in the second dropdown as the title, and that dropdown does not work to give the additional options.
I can't seem to find a way to keep the two dropdown button items from clashing, how can I make them independent of each other?
<div id="container">
<div id="select1" class="dropdown">
<button id="dpbutton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select an Existing Net
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation">
Show All Stations in DB</li>
<li class="divider"></li>
<li role='presentation' class=' bg-success ' data-value="13"'>
<a href='#' role='menuitem' onclick = 'showActivities(13)'>
Item1
</a>
</li>
<li role='presentation' class=' bg-success ' data-value="12"'>
<a href='#' role='menuitem' onclick = 'showActivities(12)'>
Item2
</a>
</li>
</ul>
</div>
</div>
<nav id="admin" class=" hidden navbar navbar-inverse admin flashit roundit" role="navigation">
<div class=" container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<form class="navbar-form navbar-left">
<div class="form-group">
<input id="cs1" type="text" class="form-control" placeholder="Call Sign" tabindex=1 onkeyup="showHint(this.value);" maxlength="16" onmousedown="isKeyPressed(event)" autofocus />
<input id="Fname" type="text" class="form-control" placeholder="First Name" tabindex=2 onkeyup="nameHint(this.value);" onblur="checkIn();" />
</div>
</form>
<button id="ckin2" type="submit" class="btn btn-success" tabindex=3 >Check In</button>
<div class="btn-group">
<button id="showops" type="button" class="btn btn-secondary btn-sm dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Show/Hide
<span class="caret"></span>
</button>
<div class="dropdown-menu" role="menu" aria-labelledby="menu1">
<a role="menuitem" class="dropdown-item" href="#">Show Grid</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show eMail</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show Lat/Lon</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show Last Name</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show TOD</a>
</div>
</div>
<button id="time" class=" btn btn-info navbar-btn " type="button" onClick="TimeLine();" >Time Line</button>
<button id="closelog" class=" btn btn-danger navbar-btn closenet " type="button" value="Close Net" oncontextmenu="rightclickundotimeout();return false;">Close Net</button>
</div> <!-- end container fluid -->
</nav>
<ul id="txtHint"></ul>
<div id="netids"></div>
<br><br><br>
<div id="actLog" class="hidden">net goes here</div>
I have this html code. There is two buttons each of the buttons have list item under them. Here is the html code:
<div class="col-xs-8">
<div class="dropdown pull-left">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
View
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a data-bind="click: function() { format('sgml_as_html') }">
Show Tags
</a>
</li>
<li role="presentation">
<a data-bind="click: function() { format('html') };">
Quick View
</a>
</li>
<li role="presentation">
<a data-bind="click: function() { format('show_link_targets') };">
Show Link Targets
</a>
</li>
<li role="presentation">
<a data-bind="click: function() { format('show_all_link_targets') };">
Show All Link Targets
</a>
</li>
</ul>
</div>
<div class="dropdown pull-left" style="margin-left: 10px;">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown_menu_preview" data-toggle="dropdown" aria-expanded="true">
Preview
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown_menu_preview">
<li>
<a data-bind="click: function() { format('bwd_preview') };">
BWD Preview
</a>
</li>
<li>
<a data-bind="click: function() { format('blaw_preview') };">
BLAW Preview (Coming Soon)
</a>
</li>
<li>
<a data-bind="click: function() { format('print_preview') };">
Print Preview (default Notif Format)
</a>
</li>
</ul>
</div>
</div>
I would like to see how in java script i can add a check mark for the list item thats picked. Here is the html Unicode character i would like to use the check mark listed in the link: http://www.w3schools.com/charsets/ref_utf_dingbats.asp
figured it out. You have to do something like this.
<span data-bind="visible: format() == 'show_link_targets'"><i class="fa fa-check"></i></span>
I'm trying to make the values of my two bootstrap dropdown menus selectable. The site can be viewed here.
As you can see I have customised the dropdown menu's slightly within the CSS.
HTML:
<!-- City Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select City <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li>All</li>
<li class="dropdown-header">City</li>
<li>Manchester</li>
<li>Liverpool</li>
<li>London</li>
<li>Newcastle</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Town</li>
<li>Wigan</li>
<li>St Helens</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Other</li>
<li>Warwick</li>
<li>Oxford</li>
<li>Cambridge</li>
</ul>
</div>
<!-- Version Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Version <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li>All</li>
<li>V1</li>
<li>V2</li>
<li>V3</li>
<li>V4</li>
<li>V5</li>
<li>V6</li>
<li>V7</li>
<li>V8</li>
</ul>
</div>
</div>
</div>
</div>
Thanks!
I used the answer posted by "GL.awog" - Consider silviomoreto.github.io/bootstrap-select, the standard bs dropdown menu is simply for navigation, not working as a select.
The site was easy to follow and I had this working in minutes :)
I am having a problem keeping bootstrap dropdown button focused when clicked(:focus) on the input field inside the dropdown.
<div id="select_btn">
<div class="btn-group">
<button class="btn btn-custom-select btn-group show-properties dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="select-p-text">Select a Property
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<div id="propertyHolder">
<div class="right-inner-addon">
<i class="fa fa-search"></i>
<input placeholder="Search for a property..." id="box" type="search" />
</div>
<li role="separator" class="divider"></li></div>
<li><ul class="selectList">
</ul>
</li>
</div>
</ul>
</div>
I'm trying to apply twitter bootstrap dropdown to table cell of my table:
http://jsfiddle.net/NzvKC/500/
So this doesn't work. I did it according to this.
However it works like this:
<li class="dropdown span2" id="chamber">
<a href="#" class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Name
<b class="caret"></b>
<br><br>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="liInner" role="presentation"><a role="menuitem" tabindex="-1" href="#">Value</a></li>
</ul>
</li>
What am I doing wrong?
The problem is the hover script. Get the code from the cameronspear page and your example will work.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>