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/
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>
I have some values in a dropdown list but I want to disable some of them.
Here I found a solution like if we add disabled style to <a> it will be disabled. I tried same for dropdown element B but it didn't work.
Help if I am wrong somewhere.
Please find below code snippet for reference,
<div class="dropdown">
<button class="fa fa-plus plusIcon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu pull-right">
<span class=" fa fa-cube dropdown-header"> Dropdown Values </span>
<span class="divider"></span>
<a class="dropdown-item">A</a>
<a class="dropdown-item disabled">B</a>
<a class="dropdown-item">C</a>
</div>
</div>
try it with list items instead. working for me
<ul class="dropdown-menu pull-right">
<li>Normal</li>
<li class="dfgdfgdf disabled">Disabled</li>
<li class="active">Active</li>
<li>Normal</li>
</ul>
Check your lib js and css reference
just add href="#"
It's working fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="fa fa-plus plusIcon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dropdown
</button>
<div class="dropdown-menu pull-right">
<span class=" fa fa-cube dropdown-header"> Dropdown Values </span>
<span class="divider"></span>
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item disabled" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
</div>
</div>
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 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>