I am trying to align few controls in one line using bootstrap class = "form-inline", but it seems it not working fine. What am I doing wrong?
Currently I am getting the result in two lines.I want them to be displayed in one line
The code which I am using is as below
<div class="form-inline">
<i class="icon-list-alt"></i>
<label class="control-label">
Please enter TB Id or TBR Id</label>
<div class="form-search">
<div class="input-append">
<input id="inputValue" type="text" class="span2 search-query" />
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a id="POA" tabindex="-1" href="#">1</a></li>
<li><a id="MOD" tabindex="-1" href="#">2</a></li>
<li><a id="LC" tabindex="-1" href="#">3</a></li>
</ul>
</div>
</div>
</div>
</div>
Check this code, hope it helps:
<div class="form-inline">
<i class="icon-list-alt"></i>
<label class="control-label">
Please enter TB Id or TBR Id</label>
<span class="form-search">
<div class="input-append">
<input id="inputValue" type="text" class="span2 search-query" />
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a id="POA" tabindex="-1" href="#">1</a></li>
<li><a id="MOD" tabindex="-1" href="#">2</a></li>
<li><a id="LC" tabindex="-1" href="#">3</a></li>
</ul>
</div>
</div>
</span>
</div>
Related
I'm trying to create a menu system designed for XL,LG,MD,SM but with a different look for XS (mobile) in BOOTSTRAP4.
I've got the following HTML:
<div class="container-fluid">
<div class="d-flex">
<div class="mr-auto">
<ul id='menu'>
<li class="mt-1">
<span class="fas fa-th fa-lg"></span>
</li>
<li class="mt-1">
Menu 1
</li>
<li class="mt-1">
Menu 1
</li>
</ul>
</div>
<div class="d-flex">
<div class="">
<button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'><i class="fas fa-sign-in-alt mr5"></i>Login
</button>
</div>
<div class="">
<form class="form-inline mr-1" action='/search' method='POST'>
<div class="input-group input-group-sm mx-auto">
<input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
<div class="input-group-append">
<button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
</div>
</div>
</form>
</div>
<div class="">
<div class="dropdown">
<button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
</div>
</div>
</div>
</div>
</div>
</div>
Which can be found at JSFiddle.
This is working fine on the larger screens, but on XS it just compresses everything together and looks horrible. I want the two different sides to go on to two different rows, but when I add row>col classes, it negates the flexbox utilities. How can I achieve this?
This is the layout I need for large displays:
Which the above code performs okay. But for XS I want this layout:
Which I just cannot get working. Right now i've just created two completely separate menu divs one that displays on XS and one for the rest, as I can't get bootstrap4 to do what I want.
Please, if anyone knows how to get the login, search and dropdown on to its own row in the above code please help and show me.
Change Bootstrap Class
<div class="container-fluid">
<div class="d-sm-flex align-items-center"> /*Change Here*/
<div class="d-flex justify-content-between">/*Change Here*/
<ul id='menu'>
<li class="mt-1">
<span class="fas fa-th fa-lg"></span>
</li>
<li class="mt-1">
Menu 1
</li>
<li class="mt-1">
Menu 1
</li>
</ul>
</div>
<div class="d-flex justify-content-between"> /*Change Here*/
<div class="">
<button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'><i class="fas fa-sign-in-alt mr5"></i>Login
</button>
</div>
<div class="flex-fill"> /*Change Here*/
<form class="form-inline mr-1" action='/search' method='POST'>
<div class="input-group input-group-sm mx-auto">
<input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
<div class="input-group-append">
<button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
</div>
</div>
</form>
</div>
<div class="">
<div class="dropdown">
<button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/lalji1051/axL14kp5/3/
Im trying to add input inside the button dropdown but it overlaps the dropdown's space. Please see my code below.
<ul class="dropdown-menu">
<li class="dropdown-header">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="input-sm form-control">
<button class="btn btn-sm btn-primary">Ok</button>
</div>
</div>
</div>
</li>
</ul>
Screenshot:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Sorry guys, I just changed my code to this:
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="input-group">
<input type="text" class="input-sm form-control" min="0">
<div class="input-group-btn">
<div class="btn-group">
<button class="btn btn-sm btn-primary">OK</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
When there was text only and you click the nav-tabs link it showes a needed content but after including these forms there it doesn't work anymore. Looks the problem is form integrations. Here is the code:
<ul class="nav nav-tabs tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#profile" role="tab" data-toggle="tab">Free Values</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#buzz" role="tab" data-toggle="tab">check</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active show" id="profile">
<label for="name" class="control-label float-left">From</label>
<div class="input-group">
<input type="text" class="form-control" value="United Kingdom" aria-label="Text input with dropdown button">
<div class="input-group-prepend">
<button class="btn btn-primary btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu">
<a class="dropdown-item " href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>
</div>
</div>
<label for="name" class="control-label float-left">To</label>
<div class="input-group">
<input type="text" class="form-control" value="US" aria-label="Text input with dropdown button">
<div class="input-group-prepend">
<button class="btn btn-primary btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu">
<a class="dropdown-item " href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control" value="981" aria-label="Text input with dropdown button">
<div class="input-group-prepend">
<button class="btn btn-primary btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">EURO</button>
<div class="dropdown-menu">
<a class="dropdown-item " href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>
</div>
<div class="input-group text-center " >
<input type="text" class="form-control" value="Cash To Cart" aria-label="Text input with dropdown button" style="color:#fff; margin:0; background-color:#222222; border-color:#323F49;
border-top-left-radius: 8px; border-bottom-left-radius: 8px; height:50px">
<div class="input-group-prepend">
<button class="btn btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu">
<a class="dropdown-item " href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>
</div>
<input type="text" class="form-control last" id="exampleInputEmail1" aria-describedby="emailHelp" value="100.000">
</div>
<div role="tabpanel" class="tab-pane fade" id="buzz">
<input type="text" class="form-control last" id="exampleInputEmail1" aria-describedby="emailHelp" value="728">
</div>
</div>
</div>
</div>
When you click to the second tab first tab content is still there and input on the second tab either doesn't appear or appear on the bottom of both tabs outside of it. How can I fix this and make tabs work correctly?
Typo error one div extra
</div> <!-- Remove This Div -->
<label for="name" class="control-label float-left">To</label>
https://jsfiddle.net/8to0v637/
I have a btn-group that gives me an editable combox box. The only problem is that it's not aligned properly.
Here is the current box-
<div class="input-append btn-group form-control">
<input class="input-sm span2" id="errorcount" size="16" type="text" value="Error">
<ul class="dropdown-menu" id="dropdown-menu">
<li><i class="icon-pencil"></i>less than 1,000</li>
<li><i class="icon-pencil"></i>1,000 - 5,000</li>
<li><a href="#"><i class="icon-pencil">
</ul>
<a class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
</div>
New changes
<div class="input-group">
<input type="text" class="input-sm" id="errorcount" size="" value="Error">
<div class="input-group">
<button type="button" class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" id="dropdown-menu">
<li><i class="icon-pencil"></i>less than 1,000</li>
<li><i class="icon-pencil"></i>1,000 - 5,000</li>
</ul>
</div>
</div>
You're missing a few container classes such as form-control and input-group.
Here's a working example of your code:
<div class="input-group">
<input type="text" class="form-control" id="errorcount" size="16" value="Error">
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" id="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="icon-pencil"></i>less than 1,000</a></li>
<li><a class="dropdown-item" href="#"><i class="icon-pencil"></i>1,000 - 5,000</a></li>
</ul>
</div>
</div>
jsFiddle here: https://jsfiddle.net/5g6c281b/
I need to have a dropdown pulled right. In my code below, the dropdown is perfectly pulled right, but clicking the dropdown is showing the options way off.
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<button class="btn btn-info">Button</button>
</div>
<div class="col-md-8">
<form class="form-inline pull-right" role="form">
<div class="form-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Option A</li>
<li>Option B</li>
</ul>
</div> <input data-type="text" class="form-control" type="text" placeholder="Search...">
</form>
</div>
</div>
</div>
Fiddle
How can I align the options with the dropdown?
Thanks
Add a btn-group class after form-group
<div class="form-group btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Option A</li>
<li>Option B</li>
</ul>
</div>
Here is Fiddle