I'm using Bootstrap 3.7 and I have two buttons inside a panel-body, but whenever I click either of the buttons, both of the buttons opens their dropdown menus.
<div class="static">
<div class ="container">
<div class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="active">Booking</li>
<li>Flight Times</li>
<li>My Trips</li>
</ul>
</div>
<div class="panel-body">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown">From
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>London Stanstead Airport (<strong>STN</strong>)</li>
</ul>
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2"
data-toggle="dropdown">To
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Manchester (<strong>MAN</strong>)</li>
<li>Glasgow (<strong>GLA</strong>)</li>
<li>Dublin (<strong>DUB</strong>)</li>
<li>Paris (<strong>CDG</strong>)</li>
<li>Madrid (<strong>MAD</strong>)</li>
<li>Brussels (<strong>BRU</strong>)</li>
</ul>
</div>
</div>
</div>
</div>
Is there a way to fix this?
You will have to wrap each button dropdown into a .btn-group itself, like this :
https://www.bootply.com/ErHpvikz6x
You can check the details in Bootstrap documentation : https://getbootstrap.com/docs/3.3/components/
Related
<div class="input-group">
<div class="input-group-btn addon-button" toggle-dropdown>
<button type="button" class="button-m button-default dropdown-toggle http-button copyInput" data-toggle="dropdown" style="border-right:none !important;">
<span id="addresstype" class="custom-input">Http://</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-m dropdown-menu-m-small custom-dropdown-withInput w-100 p-0">
<li id="Http://">
Http://
</li>
<li id="Https://">
Https://
</li>
</ul>
</div>
</div>
What javascript code or directive to be used?
We have developed a toolbar (bootstrap-navbar) that contains a number of buttons/controls.
This toolbar is working as expected, but now there is a new requirement to provide a mechanism to extend this toolbar with new buttons from the outside (maybe via json configuration...), or to remove the default buttons.
e.g, imagine that we provided this toolbar as a service and there are options to be able to add/remove buttons by configuration or something, currently not sure how...
My main questions are:
What pattern (design pattern) should I use to extend this toolbar(if possible of course :) ). Please keep in mind that someone that wants to extend the toolbar should provide the buttons with the
logic.
How to structure the project
I want to divide the button's functionality into different javascript files
and load them together in the index.html. What's the recommended way to do it?
Note: I cannot use ES6(should support IE11 also :( ) and I don't use node js to have WebPack/Gulp/Grunt
Project structure
myProj
>index.html
>css
>> style.css
>js
>>script.js
Now I want to divide this big script into smaller files (like question 3),
which technique should I use? Maybe require.js (since I don't have the option to compile...
Any example will be very helpful
This is for example of the HTML code and all the handlers logic inside the jsFile
<div class="toggle-button">
<div class="wrapper">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-middle"></div>
<div class="menu-bar menu-bar-bottom"></div>
</div>
</div>
<nav id="navi" class="navbar navbar-inverse menuBar">
<div class="container-fluid back">
<div class="navbar-header">
<a class="navbar-brand glyphicon glyphicon-dashboard" href="#"></a>
</div>
<ul class="nav navbar-nav">
<li id="dropdown1" class="dropdown open keep-open">
<a id="qlabel" class="dropdown-toggle glyphicon glyphicon-phone" data-toggle="dropdown" href="#">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<a>
Collapsible Group 1</a>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="nav navbar-nav">
<li ><a id="s_e_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav navbar-nav">
<li ><a id="s_e2_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e2_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e1_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
</div>
</ul>
</li>
<li></li>
</ul>
<ul class="nav navbar-nav" style="margin-left:25%;">
<form class="navbar-form navbar-left">
<div class="input-group">
<span style="float:left; margin-top:3%; margin-right:3%; color:white;" class="box glyphicon glyphicon-search"></span>
<input type="search" class="form-control" style="height:30px; width:70%;" placeholder="Search" oninput="search(this)">
</div>
</form>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle glyphicon glyphicon-bell" data-toggle="dropdown" href="#" >
<span class="badge badge-danger">2</span><span class="caret"></span>
</a>
<ul class="dropdown-menu notif" style="padding:20%;">
<li>Hello</li>
<hr>
<li>Notif 2</li>
<hr>
<li>Notif 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle glyphicon glyphicon-globe" data-toggle="dropdown" href="#">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>English</li>
<li>Hebrew</li>
<li>Finnish</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-log-in"></span></li>
</ul>
</div>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
A great example of a preexisting, widely-used, and well-supported library that does the exact things you are requesting is TinyMCE 4. I highly recommend you look at their source code.
Specifically their Editor class, which contains a good example of configuration options including toolbars and buttons. Also check out AddOnManager, which uses ScriptManager to load the necessary pieces as well as plugins, languages, etc.
It may make you dizzy digging through it all but if you need help there is a big community behind it that could point you in the right direction.
I'm trying to build a dropdown that functions like in the image below (or go to kayak's website):
I need a dropdown field within the dropdown field, and then I need a couple of fields that allow incrementing/decrementing.
I couldn't even get a dropdown within the dropdown to work right. I tried variations of the following:
I've tried variations of:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<form>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
</form>
</div>
I didn't even know where to begin for the increment parts of each text field.
Any thoughts on how to do this?
UPDATE: I can't keep the main dropdown open to be able to click on the dropdown or increment/decrement field within the main dropdown. The main dropdown just closes on me. Below is my latest code:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
<div class="container">
<h2>Bootstrap Counter Field</h2>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Hi guys I know its a simple thing but I'm having trouble making this work. Slidedown on click/touch for the nav, the slideUp function isnt working any help? Thanks
Some Code
<div class="nav-container">
<div class="nav nav-pills nav-stacked">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Is Landscape Architecture Right For Me?</a>
<ul class="dropdown-menu">
<li>What Is Landscape Architecture?</li>
<li>What Skills Do I Need?</li>
<li>Future Career Prospects (U.S. Labor Department)</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">What Do Landscape Architects Do?</a>
<ul class="dropdown-menu">
<li>Interviews With Leading Landscape Architects</li>
<li>ASLA Professional Awards</li>
<li>ASLA Student Awards</li>
<li>Buy the Book: <em>Becoming A Landscape Architect</em></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Why Is Their Work So Important?</a>
<ul class="dropdown-menu">
<li>Designing Our Future: Sustainable Landscapes</li>
<li>ASLA Animations</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Where Can I Study?</a>
<ul class="dropdown-menu">
<li>Picking A School</li>
<li>Design Intelligence Rankings (2013)</li>
</ul>
</div>
</div>
</div>
Jquery
$(document).ready(function(e) {
$('.nav-pills ul li').on('click touchstart', function() {
$(this).children('ul').stop().slideDown(500);
});
$('.nav-pills ul li ul').on('click touchstart', function(){
$(this).children('ul').stop().slideUp(300);
});
});
2nd part of my question is if I can hide tooltips on tablets (ipad) currently a user would have to click for the tooltip then click again to launch the modal
Some Code
<div class="modal-container0">
<button class="btn btn-primary btn-lg top" data-toggle="modal" data-placement="top" data-original-title="About Columbus Circle" data-target="#myModal_0"><span class="glyphicon glyphicon-plus"></span></button>
<div class="modal fade right" id="myModal_0" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">About Columbus Circle</h4>
</div>
<div class="modal-body">
<img src="img/0173ColCir_062_c_before.jpg" class="img-responsive"/>
<p>Columbus Circle is an awesome project</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!--End Modal 1-->
</div><!--End.modal-content-->
</div><!--End.modal-dialog-->
</div>
Jquery
$(function(){ $('.top').tooltip();});
Also here is a link to the site I'm working on asla.org/yourpath
Thanks so much!
I'm trying to put a panel with a few form elements and a dropdown category selection into a collapsible navbar in bootstrap. Currently I have
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<img class="headerToolbarIcon2" src="img/configuration.png"> Configuration<b class="caret"></b>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data>
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
</div>
I stopped event propagation on the panel, and the radio buttons work great, but whenever I click the "Personal" button to select from categories, the panel shuts. I'm sure it has something to do with having the data target of the parent dropdown, but I'm not sure how to fix that.
Bootstrap 3.0.3 can't show 2 dropdown-menu class with data-toggle="dropdown" because first click show class="dropdown-menu" and second click hide first class="dropdown-menu" and show the second . this your problem .
try this solution :
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a id="dp1" class="dropdown-toggle" data-toggle="dropdown" href="#" ><img class="headerToolbarIcon2" src="vbnet.PNG" width="20px" height="20px"> Configuration<b class="caret"></b></a>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button id="dp2" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$(function(){
$("#dp2").click(function(){
$("#dp1").attr("data-toggle","");
$("#dp1").one("click",function(){
$("#dp1").attr("data-toggle","dropdown");
});
});
});
</script>