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>
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/
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 want to put the View button on left and the add button on right, but next to each other. The 2 buttons are in different divs. How can I do this?
Demo
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group" id="divNewNotificationsRole-admin">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
</div>
<div id="rolecontainer" class="container">
<div id="addContainer" align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
</div>
The easy way is to add a float: left; to the first button container.
.btn-group {
float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group" id="divNewNotificationsRole-admin">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
<div id="rolecontainer" class="container">
<div id="addContainer" align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
</div>
</div>
You can put both buttons inside the same div, and use bootstrap classes "left" and "right":
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group" id="divNewNotificationsRole-admin">
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
</div>
<div id="rolecontainer" class="container">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split left" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning right">Add</button>
</div>
You can use bootstrap row and column classes to avoid various resolution issues.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-1 col-md-1 clo-lg-1">
<div class="btn-group" id="divNewNotificationsRole-admin">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
View</button>
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-1 col-md-1 clo-lg-1">
<div id="rolecontainer">
<div id="addContainer">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
</div>
</div>
</div>
A better practice for this is to CSS both parent divs containing the button with
.div1, .div2 {
display: inline-block;
}
Having this will put them inline.
I don't know how to display it in a single line so what should be done? I tried giving display inline for id="search" , but it didn't work.
Thanks in advance.
<div class="row">
<div id="search">
<div class="form-group">
<input type="text" class="form-control" id="" placeholder="Search by skills/titles">
</div>
<div class="dropdown">
<button class="btn btn-grey dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Location
</button>
<div class="dropdown-menu" aria-labelledby="about-us">
<a class="dropdown-item" href="#">Chennai</a>
<a class="dropdown-item" href="#">Bangalore</a>
<a class="dropdown-item" href="#">Mumbai</a>
<a class="dropdown-item" href="#">Delhi</a>
<a class="dropdown-item" href="#">Cochin</a>
<a class="dropdown-item" href="#">Hyderabad</a>
</div>
</div>
<button type="button" class="btn btn-outline-danger">Find Jobs</button>
</div>
</div>
You should take a look into the Bootstrap Grid system, is very useful
https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Option 1 </h1>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="col-md-6 col-xs-6">
<input type="text" class="form-control" id="test" placeholder="Search by skills/titles">
</div>
<div class="col-md-3 col-xs-3">
<div class="dropdown">
<button class="btn btn-grey dropdown-toggle" type="button" id="test1" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Select Location
</button>
<div class="dropdown-menu" aria-labelledby="about-us">
<a class="dropdown-item" href="#">Chennai</a>
<a class="dropdown-item" href="#">Bangalore</a>
<a class="dropdown-item" href="#">Mumbai</a>
<a class="dropdown-item" href="#">Delhi</a>
<a class="dropdown-item" href="#">Cochin</a>
<a class="dropdown-item" href="#">Hyderabad</a>
</div>
</div>
</div>
<div class="col-md-3 col-xs-3">
<button type="button" class="btn btn-outline-danger">Find Jobs</button>
</div>
</div>
</div>
<h1>Option 2 </h1>
<div class="row">
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="" placeholder="Search by skills/titles">
</div>
<div class="form-group">
<div class="dropdown">
<button class="btn btn-grey dropdown-toggle" type="button" id="" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Select Location
</button>
<div class="dropdown-menu" aria-labelledby="about-us">
<a class="dropdown-item" href="#">Chennai</a>
<a class="dropdown-item" href="#">Bangalore</a>
<a class="dropdown-item" href="#">Mumbai</a>
<a class="dropdown-item" href="#">Delhi</a>
<a class="dropdown-item" href="#">Cochin</a>
<a class="dropdown-item" href="#">Hyderabad</a>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Find Jobs</button>
</div>
</form>
</div>
</div>
</body>
</html>
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/