I have the following single line containing an search input bar and 2 buttons. How do I style this to make the search input box smaller according to the buttons next to it? I would like to add 2 more input fields to the right of the search box and to the left of the buttons shown in the image. Is there a way to do this without using "col-md-x"?
http://i.imgur.com/r4kqYm0.png
This is what I have so far but I feel like it is very hacky.
<div class="col-md-10 search-left">
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-btn" dropdown>
<button type="button" class="btn btn-default dropdown-toggle first-dropdown" dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li></li>
</ul>
</div>
<div class="input-group-btn" dropdown>
<button type="button" class="btn btn-default dropdown-toggle second-dropdown"
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li></li>
</ul>
</div>
<input type="text" class="form-control" placeholder="Search term" ng-model="search.value">
</div>
</div>
</form>
</div>
<div class="col-md-2 search-right">
<div class="pull-right" popover="Please select rows to export" popover-trigger="mouseenter">
<button class='btn btn-default'><span class="glyphicon glyphicon-download-alt"></span></button>
</div>
<div class="pull-right">
<button class='btn btn-default add-item' ng-click="addItem()">Add Staff</button>
</div>
</div>
Add .form-inline to your form (which doesn't have to be a ) for left-aligned and inline-block controls.
Related
Problem is bootstrap dropdown select list appear away from button. The position is not correct and not fixed with button. See the image down to understand issue. Can anyone help me?
Here is my code:
<div class="button-group dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Velg lokaler
<span class="caret"></span>
</button>
<ul class="dropdown-menu px-2" data-bind="foreach: bookable">
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" checked="checked" data-bind="text: name"/>
<label class="form-check-label" data-bind="text: name">
</label>
</div>
</li>
</ul>
</div>
I'm looking for the right way of displaying buttons around an input field in one row, and avoid (if possible) the use the "width" attribute. I want the buttons and field to line up in a fixed width and position even as the value (that the user chooses from the drop down) change
<div class="row" style="margin-top: 30px;">
<div class="col-md-3"></div>
<div class="col-md-6">
<form class="form-inline">
<div class="form-group" style="padding-left: 40px;">
<div class="dropdown">
<button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-map-marker" style="color:blue"></i> United States <span class="caret"></span>
</button>
<ul class="dropdown-menu columns">
<li><strong>United States</strong></li>
<li>France</li>
<li>United Kingdom</li>
</ul>
</div>
</div>
<div class="form-group">
<div class="dropdown">
<button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
USD <span class="caret"></span>
</button>
<ul class="dropdown-menu columns">
<li><strong>USD</strong></li>
<li>EUR</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="amountnum"> </label>
<input style="font-weight: bold;text-align: center" type="text" class="form-control input-lg" id="amountnum" placeholder="number" value="10">
</div>
<div class="form-group">
<div class="dropdown">
<button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
1 month <span class="caret"></span>
</button>
<ul class="dropdown-menu columns">
<li>1 Weeks</li>
<li>2 Weeks</li>
<li><strong>1 month</strong></li>
</ul>
</div>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
jsfiddle: https://jsfiddle.net/drorm/k43kyfpw/
when the screen opens, make the left pane narrower to see the buttons line up (instead of falling dropping to separate rows)
Suggestions are appreciated
Add the following CSS style
.navbar-form,.form-inline {
display: flex;
}
The use of flex (or inline-flex) is quite powerful. Combine with the css flex property on items to control the growth and shrinking of controls.
Google "CSS flex" for more.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've been trying to make a responsive navbar with columns but I can't manage to react well to the different sizes I've trying al lot of things: column-offset, contaniers, paddings... but I can't get a decent result. Here it is what I managed to do so far:
<nav class="navbar navbar-default ">
<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-collapse collapse" style="height: 0px;">
<div class="row show-grid">
<div class=" col-xs-8 col-md-6 col-md-offset-2" >
<ul class="nav navbar-nav" id="altre">
<li>Shop
</li>
<li>Style Guide
</li>
<li>Be a man
</li>
</ul>
</div>
<div class=" col-xs-4 col-md-4">
<ul class="nav navbar-nav hidden-xs" id="login">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Login</a>
<div class="dropdown-menu">
<form class="navbar-form" role="form">
<p><input class="form-control" type="text" placeholder="E-mail"></p>
<p><input class="form-control" type="password" placeholder="Contrasenya"></p>
<button type="button" class="btn btn-primary">Sign in</button>
<button type="button" class="btn btn-success">Log in</button>
</form>
</div>
</li>
</ul>
<form class="navbar-form text-center visible-xs" role="form">
<p><input class="form-control" type="text" placeholder="E-mail"></p>
<p><input class="form-control" type="password" placeholder="Contrasenya"></p>
<button type="button" class="btn btn-primary">Sign in</button>
<button type="button" class="btn btn-success">Log in</button>
</form>
</div>
</div>
</div>
</nav>
At first sight it seems to be working right but when you resize you see the difference between the right and left margin.
I'm very lost at this point, anyone knows a clean way to have a good result?
here the files if you don't want to download one by one:
https://drive.google.com/file/d/0BwOBDBZckmYwZ20tLTRQdFI3a3c/edit?usp=sharing
thanks
You need to use .container class in divs before rows, the problem that you have seems to be using percentages in margin-left.
<div class="container"><!-- container -->
<div class="row">
<ul>...
</div>
</div>
See: http://jsfiddle.net/uFwnU/
I am trying make a search bar which should look some thing like this:
http://s22.postimg.org/ecaxmtj8x/search_bar.png
I am using bootstrap 3. In the code below I have 3 buttons, where the "menu 2" button opens a dropdown menu. I would like the "menu 1" button to open a menu too. But so far my attempts have failed.
When I try to group the buttons into a btn-group, it seperates from the joined search bar, which is not what I want. Is there a way to have 2 menu's inside a div using the input-group class?
<div class="input-group input-group-lg">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
<button class="btn btn-primary" type="button">
test 1 <span class="caret"></span>
</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
test 2 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</div>
I faced the same problem and found a pure bootstrap solution. Avoid any extra css "repairs" by wrapping all drop down buttons in a single input-group-btn div, then each drop down button wrap in a btn-group div. Using multiple input-group-btn divs in a single input-group div breaks the styling and requires css repairs as offered in another solution. The bootstrap doc hints at this. Here is a simple example to demonstrate:
<div class="input-group">
<div class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span>btn-drop-a</span></button>
<ul class="dropdown-menu">
<li>li-a-1</li>
<li>li-a-2</li>
<li>li-a-3</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span>btn-drop-b</span></button>
<ul class="dropdown-menu">
<li>li-b-1</li>
<li>li-b-2</li>
<li>li-b-3</li>
</ul>
</div>
</div>
<input class="form-control" type="text" placeholder="search">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</input>
</div>
It's quite easy to do that. Though I employed a small hack to make it look proper (It may be done without that hack too I think ... Not too sure )
jsFiddle Demo : http://jsfiddle.net/niranjan94/dgs25/
HTML:
<div class="col-lg-6 visible-xs">
<br>
<form action="" method="get" role="search">
<div class="input-group input-group-lg">
<input type="text" name="query" class="form-control" placeholder="Search Advertisements">
<span class="input-group-btn">
<button class="btn btn-primary custom" type="submit"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-primary dropdown-toggle custom" data-toggle="dropdown">Button 1 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</span>
<span class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Button 2 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</span>
</div>
</form>
</div>
CSS (Overriding default border-radius to make it look proper):
.custom{
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
(There might be other better ways to do this too)
That's it ... :) Hope it solves your problem .
Well, for starters you havent set the data-toggle="dropdown" for button test 1
The link to the image you posted doesnt work, but you need to also set a div.input-group-btn to wrap those button and ul.
You should take a closer look at Bootsrap documentation.
I'm trying to implement a dropdown button in a bootstrap form. Unfortunately, the form is not submitted. It looks like that:
<form class="form-inline" method="post" action="">
<fieldset>
<input type="text"></input>
<div class="btn-group" data-toggle="dropdown">
<a class="btn dropdown-toggle pull-right" data-toggle="dropdown" href="">
Show <span class=caret></span></a>
<ul class="dropdown-menu">
<li><input name="_show" class='btn' type="submit" value="Show"></input></li>
<li><input name="_export" class='btn' type="submit" value="Export"></input></li>
</ul>
<button name="_export" class='btn' type="submit">Export</button>
</fieldset>
</form>
Two questions:
The submit button outside the 'div' container works, the both inputs within do nothing. Why?
The dropdown button is not aligned properly, why that?
* EDIT *
If the buttons are removed from the ul, there is a small empty list which appears when clicking the 'show button'
The same name attribute does not really matter because the both buttons do the same, the one outside the btn-group shall be removed. as soon as the one within works properly
A very strange thing is, if i put
<div class="btn-group" style="vertical-align: middle" data-toggle="dropdown">
<a class="btn dropdown-toggle pull-right" data-toggle="dropdown" href="">
Show <span class=caret></span></a>
<ul class="dropdown-menu">
<li>Interactive</li>
<li>Pic</li>
</ul>
</div>
Nothing happens when clicking on the dropdown-menu entries. on the buttom in firefox, i can see that there is a link, but a click does not have any effect...
Alignment: I found out, there is a general problem with twitter bootstrap button-group whidh is solved by:
style="vertical-align: middle"
Try this code :
<div class="container row-fluid">
<form method="post" class="form-horizontal " action="">
<fieldset>
<input type="text" name="tex"/>
<button name="_export" class='btn' type="submit">Export</button>
<span class="dropdown">
<a class="btn dropdown-toggle" id="dLabel" data-toggle="dropdown" data-target="#">
<i class="icon-minus-sign"></i> Anmeld annonce
<span class="caret"></span>
</a>
<ul class="dropdown-menu" >
<li><a name="_show" href="#">Hello</a></li>
<li><a name="_export" href="#">Boy</a></li>
</ul>
</span>
</fieldset>
</form>
</div>
MartialE