I am trying to create a dropdown menu with bigger clickable area. Anytime I click within the the drop menu but outside the checkbox the menu closes. How can I change the bootstrap code to adjust this? I couldn't find locate the line to adjust this.
<div class="container-fluid">
<div class="row">
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-checka-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container"></div>
</div>
</div>
Try adding some extra padding to your .form-check-label and .form-check-input, those should both be clickable.
I have added width level 100 to .btn-group and .dropdown-menu classes in order to achieve this. It was not working for other classes. And again in the labels, I have added some styling in order to display how the border works.
To prevent closing the dropdown on a click, I have included a script to stop
stop Propagation
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
.btn-group,
.dropdown-menu {
width: 100%;
}
label {
border: 1px solid #ccc;
padding: 10px;
margin: 0 0 10px;
display: block;
width: 100%;
}
label:hover {
background: #eee;
cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="btn-group dropright">
<button type="button btn-class" class="btn btn-secondary dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<div class="form-check form-check-inline">
<label class="form-checka-label" for="inlineCheckbox1"><input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
1</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="inlineCheckbox2"><input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
2</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="inlineCheckbox3"><input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
3 (disabled)</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Related
Hi I am working in Angular 4 designing using bootstrap 4.
I tried to add search Icon at the end of my label.
Codings below:
<div class="row ">
<div class="form-group col-lg-2"></div>
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<input type="text" class="form-control" name="LocationId" >
<span class="input-group-btn">
<button class="btn btn-info btn-md" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
<div class="form-group col-lg-4">
<label class="Bold">Description </label>
<input type="text" class="form-control" name="description">
</div>
<div class="form-group col-lg-2"></div>
</div>
but it comes like the attached image. How to add icon at the end of label. Is any problem with my coding?
Try to make use of input-group component of bootstrap4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-6">
<div class="form-group">
<label>Username</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Go</button>
</div>
</div>
</div>
</div>
</div>
</div>
Try this. Wrap input and span to the input-group.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<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.min.js" ></script>
<div class="row ">
<div class="form-group col-lg-2"></div>
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<div class="input-group">
<input type="text" class="form-control" name="LocationId" >
<span class="input-group-append">
<button class="btn btn-info btn-md" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<div class="form-group col-lg-4">
<label class="Bold">Description </label>
<input type="text" class="form-control" name="description">
</div>
<div class="form-group col-lg-2">
</div>
</div>
Form-control class for Input makes the text box occupy the entire width. We need to use input-group class to group input and any icon attached to it. Refer code snippet below for example:
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
Following is the code snippet:
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<input type="text" class="location-txt form-control" name="LocationId" >
<span class="input-group-btn location-search">
<button class="btn btn-info btn-md" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
CSS
.location-txt
width: calc(100% - 44px);
float: left;
}
.location-search{
display: inline-block;
float: right;
}
I am trying to beautify a form in bootstrap. I don't understand why I can not add some margin to a hyperlink thats below an input? I tried to remove bootstrap and that didn't work, so I don't think it has something to do with bootstrap!
https://jsfiddle.net/k8ws75je/
<div class="col-md-8 col-md-offset-2">
<form class="form-horizontal" role="form" method="POST" action="{{ route('register') }}">
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="" required autofocus>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" name="email" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
<div>
<div class="col-md-6 col-md-offset-4">
<a id="linkpassword" href="#">Change Password</a>
<button type="submit" class="btn btn-success pull-right">
Update
</button>
</div>
</div>
</form>
#linkpassword{
margin-top: 400px;
}
That's because a elements are inline elements, which cannot have vertical margins. Change it to an inline-block to make it work
#linkpassword{
margin-top: 200px;
display: inline-block;
}
https://jsfiddle.net/knu1badd/1/
#linkpassword{
margin-top: 400px;
position:absolute;
}
Make it display: block. Thus it will be as you want.
warp a element in a div block and apply the position/margin on this block.
Because a is an inline element.
<div class="margin-top">
<a id="linkpassword" href="#">Change Password</a>
</div>
In my sample, the button show in down.
<form id="search-site" action='search' method='get'>
<div class="input-field">
<input id="search" type="search" name='q'>
<label class="label-icon" for="search"><i class="material-icons" >search</i></label></div>
<button type="submit">search</button>
</form>
Try this Code
HTML
<div class="container">
<form id="search-site" action='search' method='get'>
<div class="input-group">
<div class="input-field">
<input id="search" type="search" name='q'>
<label class="label-icon" for="search">
<i class="material-icons" >search</i>
</label>
</div>
<button type="submit" class="input-group-addon btn">search</button>
</div>
</form>
</div>
CSS
.input-group{
display:table;
width:100%;
}
.input-group .input-field,
.input-group .input-group-addon{
display:table-cell;
}
hope this helps..
I am trying to add text to header of jumbotron template:
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<p class="navbar-text">Right align-Text</p>
<button type="submit" class="btn btn-success">Sign up</button>
</form>
</div><!--/.navbar-collapse -->
But it is not after Sign in button
I am newbee in html, could you help.
Here you go, https://jsfiddle.net/wttn6sxs/2/
Just add this in your CSS :
.navbar-text {
margin-top: 7.5px;
margin-bottom: 7.5px;
display: inline-block;
float: initial;
}
This will fix your issue.
I use bootstrap in my project.
The width of the area is 350px.
I have this html elements:
<form class="form-inline">
<div class="input-group input-group-sm col-xs-5" >
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div class="input-group input-group-sm">
<select class="form-control" ng-model="" ng-options="">
<option value="">- authority-</option>
</select>
</div>
</form>
Here is plunker.
How can I make search box and dropdown list in one line.
You don't need css to fix this, you can do it with bootstrap styles.
Wrap the form in a 12 wide container (col-lg-12) and wrap each input in a 6 wide container (col-lg-6). (For simplicities sake I only used desktop size in the example)
This would look like:
<div class="col-lg-12">
<!-- start form -->
<div class="col-lg-6">
<!-- input -->
</div>
<div class="col-lg-6">
<!-- input -->
</div>
<!-- end form -->
</div>
That way bootstrap will cut the screen in half (12 / 2 = 6) and put the input box in there.
To make it work with your code have a look at this fiddle
Note I added col-lg, col-md, col-sm and col-xs to make them appear on the same line regardless of screen size.
EDIT:
To put all of this in another panel use:
<div class="panel panel-default">
<div class="panel-body">
<!-- form row -->
</div>
</div>
Working fiddle: http://jsfiddle.net/92z54z04/596/
.input-group are table displayed, so:
.input-group {
display: inline-table;
}
will solve your problem.
JSFiddle
<form class="form-inline">
<div class="form-group" >
<input type="text" placeholder="search"/>
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
<select class="form-group" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</form>
you can do it with bootstrap easily by using col-xs-6 property
here is the working code:
<form class="form-inline">
<div class="col-xs-6">
<div class="input-group input-group-sm" >
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="input-group input-group-sm">
<select class="form-control" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
</div>
</form>
You could extend bootstrap to allow a select element inside your input group.
This depends on your usecase if it is intuitive, but I think this may be a good looking option to evaluate.
You basically copy and paste some of bootstraps style to make the select element fit into a input group.
If you have control over the sass, less files, you may be able to do it cleaner than I did.
.input-group-select:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group-select {
position: relative;
width: 1%;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
}
.input-group-select>select {
border-color: #ccc;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 7px;
padding-bottom: 7px;
border-radius: 0;
border-left-width: 0;
}
.input-group-btn:not(:first-child):not(:last-child)>.btn {
border-radius: 0;
border-left-width: 0;
}
.input-group-select:last-child>select {
border-radius: 0 3px 3px 0;
}
.input-group-sm>.input-group-select>select {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="input-group input-group-sm col-xs-5">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-select">
<select ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div class="input-group input-group-sm col-xs-5">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-select">
<select ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
</div>
<div class="input-group input-group-sm col-xs-5">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
<div class="input-group-select">
<select class="select" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
</div>
</form>
Just use style in div:
display:inline-table;
http://jsfiddle.net/ankitg1602/mqnrmLjb/1/