trying to figure out how to stop both buttons from showing a drop-down when only one is clicked
here is my html code
<form action="{{ url_for('crudSEapi.gcp_image_search') }}" method="post">
<div class="row">
<div class="col-md-4" style="width: fit-content;">
<input type='text' name="data" class="test"/>
<button name="forwardBtn" type="submit">Search Image Name</button>
</div>
<div class="col-md-4 input-group left" >
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split tag1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Networking</span> <span class="caret" > </span></button>
<div class="dropdown-menu dropdown-menu-right" >
<ul class="category_filters" >
{%for d in test%}
<li>
<input type="radio" name="{{d.keyword1}}" id="{{d.keyword1}}" value="{{d.keyword1}}" ><label class="category-label" for="{{d.keyword1}}" >{{d.keyword1}}</label>
</li>
{%endfor%}
</ul>
</div>
<button type="button" class="btn btn-secondary dropdown-toggle2 dropdown2-toggle-split tag1" data-toggle="dropdown2" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Security</span> <span class="caret" > </span></button>
<div class="dropdown-menu dropdown-menu-left" >
<ul class="category_filters2" >
{%for d in test%}
<li>
<input type="radio" name="{{d.keyword2}}" id="{{d.keyword2}}" value="{{d.keyword2}}" ><label class="category-label" for="{{d.keyword2}}" >{{d.keyword2}}</label>
</li>
{%endfor%}
</ul>
</div>
</div>
<div class="col-md-4 input-group2 right" >
</div>
</div>
</div>
</form>
I am using bootstrap with jquery
how do I order my 2 input-groups? how do I keep the 2 dropdown buttons lined up AND show only the dropdown for each button
As #harjinder mentioned you seem to have missed adding a dropdown wrapper. Here is a working sample that might help
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="margin: 40px">
<div class="dropdown" style="display: inline-block">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split tag1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Networking</span> <span class="caret" > </span></button>
<div class="dropdown-menu dropdown-menu-right" >
<ul class="category_filters" >
<li><input type="radio" name="input1" id="input1" value="input1" ><label class="category-label" for="input1" >input1</label></li>
<li><input type="radio" name="input2" id="input2" value="input2" ><label class="category-label" for="input2" >input2</label></li>
</ul>
</div>
</div>
<div class="dropdown" style="display: inline-block">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split tag1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Networking</span> <span class="caret" > </span></button>
<div class="dropdown-menu dropdown-menu-left" >
<ul class="category_filters" >
<li><input type="radio" name="input3" id="input3" value="input3" ><label class="category-label" for="input3" >input3</label></li>
<li><input type="radio" name="input4" id="input4" value="input4" ><label class="category-label" for="input4" >input4</label></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Please use the wrapper on both dropdowns
<form action="{{ url_for('crudSEapi.gcp_image_search') }}" method="post">
<div class="row">
<div class="col-md-4" style="width: fit-content;">
<input type='text' name="data" class="test"/>
<button name="forwardBtn" type="submit">Search Image Name</button>
</div>
<div class="col-md-4 input-group left" >
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split tag1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Networking</span> <span class="caret" > </span></button>
<div class="dropdown-menu dropdown-menu-right" >
<ul class="category_filters" >
{%for d in test%}
<li>
<input type="radio" name="{{d.keyword1}}" id="{{d.keyword1}}" value="{{d.keyword1}}" ><label class="category-label" for="{{d.keyword1}}" >{{d.keyword1}}</label>
</li>
{%endfor%}
</ul>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle2 dropdown2-toggle-split tag1" data-toggle="dropdown2" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Security</span> <span class="caret" > </span></button>
<div class="dropdown-menu dropdown-menu-left" >
<ul class="category_filters2" >
{%for d in test%}
<li>
<input type="radio" name="{{d.keyword2}}" id="{{d.keyword2}}" value="{{d.keyword2}}" ><label class="category-label" for="{{d.keyword2}}" >{{d.keyword2}}</label>
</li>
{%endfor%}
</ul>
</div>
</div>
</div>
<div class="col-md-4 input-group2 right" >
</div>
</div>
</div>
Related
I'm new to Bootstrap.js and am trying to a align an input-group side-by-side with a dropdown but can't get it to work--code and figure below. I have tried the table approach but end up the elements vertically misaligned. What should I do?
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Color By
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="colorBy">
<li>Diameter</li>
<li>LOF</li>
<li>Year</li>
<li>Material</li>
</ul>
</div>
<div class="row" style="width: 500px">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="resetView()">Reset View</button>
<button type="button" class="btn btn-default" onclick="zoomToPipe()">Zoom to Pipe</button>
</div>
<input type="text" id="pipeId" name="pipeId" value="Pipe ID" class="form-control" style="width: max-content;">
</div>
</div>
</div>
What I get:
What I want:
Try this:
<div class="row">
<div class="col-sm-2">
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Color By
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="colorBy">
<li>Diameter</li>
<li>LOF</li>
<li>Year</li>
<li>Material</li>
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="resetView()">Reset View</button>
<button type="button" class="btn btn-default" onclick="zoomToPipe()">Zoom to Pipe</button>
</div>
<input type="text" id="pipeId" name="pipeId" value="Pipe ID" class="form-control" style="width: max-content;">
</div>
</div>
</div>
I want to add a simple Menu Link to the right side of my NAVBAR.
Right next to the magnifier search icon.
Basically I need to put a Donate Link Menu.
Thank you so much in advance for your help.
This is the website: www.clihelp.org
This is the menu code for my NAVBAR. Please let me know if you need more code.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button> <a class="navbar-brand" href="<?php echo $config['serv_url'];?>">clihelp <sup>beta</sup></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php
$Show->show_navbar_menu();
?>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left" role="search" method="POST" action="<?= $config['serv_url'];?>">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
</button>
<?php
$Show->filter_menu();
?>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="hidden" name="os_id" >
<input type="text" class="form-control" name="q" placeholder="Search term...">
<span class="input-group-btn" id="search-wrapper">
<button class="btn btn-default" type="submit" id="search-button" disabled><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</form>
</ul>
</div>
</nav>
</div>
</div>
</div>
Try this:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button> <a class="navbar-brand" href="<?php echo $config['serv_url'];?>">clihelp <sup>beta</sup></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php
$Show->show_navbar_menu();
?>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left" role="search" method="POST" action="<?= $config['serv_url'];?>">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
</button>
<?php
$Show->filter_menu();
?>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="hidden" name="os_id" >
<input type="text" class="form-control" name="q" placeholder="Search term...">
<span class="input-group-btn" id="search-wrapper">
<button class="btn btn-default" type="submit" id="search-button" disabled><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</form>
<li>Link</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
change your html
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form navbar-left" role="search" method="POST" action="<?= $config['serv_url'];?>">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
</button>
<?php
$Show->filter_menu();
?>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="hidden" name="os_id" >
<input type="text" class="form-control" name="q" placeholder="Search term...">
<span class="input-group-btn" id="search-wrapper">
<button class="btn btn-default" type="submit" id="search-button" disabled><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</form>
</li>
<li>Donate Link</li>
</ul>
I'm trying to implement an input group that has multiple buttons on the left and for now only one button on the right as shown in this image:
The problem is, as soon as I have more than one button per side, the input field resizes to max width and kicks the one button out on smaller displays:
With only a button on the left and a button on the right, it works 100% on all screen sizes:
Le Code:
<div class="input-group br">
<span class="input-group-btn">
<div class="btn-group">
<a href="#" class="btn btn-primary clear-search">
<span class="glyphicon glyphicon-refresh"></span>
</a>
<a href="#" class="btn btn-primary qr-code">
<span class="glyphicon glyphicon-qrcode"></span>
</a>
</div>
</span>
<input class="form-control search" type="search" name="search" placeholder="Search">
<span class="input-group-btn">
<div class="btn-group dropup">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-search"></span>
Search
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="buyer-identifier" href="#">Buyer Number</a></li>
...
<li class="divider"></li>
<li><a class="clear-search" href="#">Clear Search</a></li>
</ul>
</div>
</span>
</div>
Fiddle demo
Any idea on how to make the first image work for all screen sizes?
You don't need the btn-group element...
<div class="input-group br">
<span class="input-group-btn">
<a href="#" class="btn btn-primary clear-search">
<span class="glyphicon glyphicon-refresh"></span>
</a>
<a href="#" class="btn btn-primary qr-code">
<span class="glyphicon glyphicon-qrcode"></span>
</a>
</span>
<input class="form-control search" type="search" name="search" placeholder="Search">
<span class="input-group-btn">
<div class="btn-group dropup">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-search"></span>
Search
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="buyer-identifier" href="#">Buyer Number</a></li>
...
<li class="divider"></li>
<li><a class="clear-search" href="#">Clear Search</a></li>
</ul>
</div>
</span>
</div>
Bootply example
Don't use two button group wrapper elements.
<div class="input-group br"> <span class="input-group-btn">
<a href="#" class="btn btn-primary clear-search">
<span class="glyphicon glyphicon-refresh"></span>
</a>
<a href="#" class="btn btn-primary qr-code">
<span class="glyphicon glyphicon-qrcode"></span>
</a>
Demo
use btn-secondary class
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary">☺</button>
<button type="button" class="btn btn-secondary">SEND</button>
</div>
</div>
I have to make an input-group-btn in twitter bootstrap with a dropdown-menu attached to it but the output image below shows that the btn-group is not of the same size with the input group.
Here is the html code:
<div class="row">
<div class="col-md-2"><button type="button" class="btn btn-primary" onclick="showModalAddStation();">Add Station</button></div>
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-btn" >
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
<span data-bind="label" id="searchLabel">Search By</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<input type="search" name="searchBy" id="searchBy" class="form-control" />
<span class="input-group-btn">
<button id="filter" class="btn btn-primary btn-block glyphicon glyphicon-plus" onclick="searchStationTable();"></button>
</span>
</div>
</div>
</div>
Your problems are :
The button of dropdown-menu you have btn-sm class, it will decrease size of button http://getbootstrap.com/components/#btn-dropdowns-sizing
solution : remove btn-sm class
You are using glyphicon on the button.
solution : you can use span, i tag or else on button if using glyphicon http://getbootstrap.com/components/#glyphicons-how-to-use
<div class="row">
<div class="col-md-2"><button type="button" class="btn btn-primary" onclick="showModalAddStation();">Add Station</button></div>
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-btn" >
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span data-bind="label" id="searchLabel">Search By</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<input type="search" name="searchBy" id="searchBy" class="form-control" />
<span class="input-group-btn">
<button id="filter" class="btn btn-primary btn-block" onclick="searchStationTable();">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
http://jsfiddle.net/1hm7thq5/
I want that the dropdown buttons also can go over the whole page like buttons with the class btn-block. Here my current code : http://jsfiddle.net/wLUkx/1/
Here the code:
<div class="btn-group">
<a class="btn btn-primary btn-block btn-large dropdown-lead dropdown-toggle" data-toggle="dropdown" href="#">
xx
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<form>
<input type="hidden" name="game" value="ttt-play">
<button class="btn btn-link">xx</button>
</form>
<hr>
<form>
<input type="hidden" name="game" value="ttt-newgame">
<button class="btn btn-link">xx</button>
</form>
<form>
<input type="hidden" name="game" value="ttt-joingame">
<button class="btn btn-link">xx</button>
</form>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-primary btn-block btn-large dropdown-lead dropdown-toggle" data-toggle="dropdown" href="#">
yyy
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<form>
<input type="hidden" name="game" value="ttt-play">
<button class="btn btn-link">yyy</button>
</form>
<hr>
<form>
<input type="hidden" name="game" value="ttt-newgame">
<button class="btn btn-link">yyy</button>
</form>
<form>
<input type="hidden" name="game" value="ttt-joingame">
<button class="btn btn-link">yyy</button>
</form>
</ul>
</div>
<form>
<input type="hidden" name="game" value="paint">
<button class="btn btn-large btn-block btn-primary" type="submit">paint</button>
</form>
Can anybody help me?
Add btn-block to <div class="btn-group">
<div class="btn-group btn-group-justified">
<button type="button" style="width:100%;" class="btn btn-success btn-lg dropdown-toggle" data-toggle="dropdown">
actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="btn-group-justified">Separated link</li>
<li class="btn-group-justified">Separated link</li>
<li class="btn-group-justified">Separated link</li>
<li class="divider"></li>
<li class="btn-group-justified">Separated link</li>
</ul>
</div>
http://jsfiddle.net/wLUkx/14/ (but for twitter bootstrap 3.x verison)
The class 'btn-group' has a property of display:inline-block. Changing this to display: block should give you the desired effect.
add this to your css .btn-group{display:block;}
The problem isn't the buttons in that fiddle, its the containers. The 'btn-group' class is inline and it is making the buttons the minimum width they can be. You can either remove 'btn-group' from those containers or create a new class that makes them "width:100%;"
What worked for me was adding btn-block to both <div class="btn-group" and <a class="btn">
I discovered the solution here
<div class="btn-group btn-block">
<a class="btn btn-primary btn-block btn-large dropdown-lead dropdown-toggle" data-toggle="dropdown" href="#">
xx
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<form>
<input type="hidden" name="game" value="ttt-play">
<button class="btn btn-link">xx</button>
</form>
<hr>
<form>
<input type="hidden" name="game" value="ttt-newgame">
<button class="btn btn-link">xx</button>
</form>
<form>
<input type="hidden" name="game" value="ttt-joingame">
<button class="btn btn-link">xx</button>
</form>
</ul>
</div>