When collapsing the window before it hits the medium breakpoint, the column containing the select field overlaps the first column with the "heading". Not sure why. Any help would be appreciated.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div class="row">
<div class="col-md-1">
<span class="h2">Leads</span>
</div>
<div class="col-md-3">
<form>
<input type="hidden" name="status" id="status" value="Today">
<input type="hidden" name="tab" id="tab-status-agent" value="follow_up">
<select name="user_id" id="select-agent" class="form-control" onchange="this.form.submit()">
<option value="">All Team Members</option>
<option value="unassigned">Unassigned</option>
<option value="7">Luke Skywalker</option>
<option value="2">Han Solo</option>
<option value="1">Leia Organa</option>
</select>
</form>
</div>
<div class="col-md-5 text-right">
<form data-remote="false" class="d-inline" id="power-dialer-form" action="/calls/power_dialer" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="vqtLpEeM2kh5MP7nZFhFrfrmJhjm6T3IF++8UGmHpHjZP4E9WSOpIsextGJptcRYPIuDBqVWgDkVYeHOn9uWow==">
<button type="submit" name="commit" value="" class="btn btn-primary" id="add-to-power-dialer" disabled="">
<i class="fas fa-phone" title="Add to power dialer"></i>
</button>
</form>
<div class="btn-group" role="group" aria-label="Basic example">
<a class="btn btn-primary" data-toggle="modal" data-target="#assign-leads" title="Assign leads" href="#">
<span class="fas fa-user-check"></span>
</a> <a class="btn btn-primary" data-toggle="modal" data-target="#new-lead" title="New lead" href="#">
<span class="fas fa-user-plus"></span>
</a> <a class="btn btn-primary" data-toggle="modal" data-target="#import-leads" title="Import leads" href="#">
<span class="fas fa-file-import"></span>
</a>
</div>
</div>
<div class="col-md-3">
<div class="input-group search-bar">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon"><i class="fas fa-search"></i></div>
</div>
<input type="search" id="search" class="form-control">
</div>
</div>
</div>
I attempted this setting:
ROW: COL-2 COL-3 COL-4 COL-3
Which fixes the overlap but then the select field is too far away from the heading.
Please try this code i hope it will be worked
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div class="row">
<div class="col-md-4">
<span class="h2">Leads</span>
<form class="ml-3">
<input type="hidden" name="status" id="status" value="Today">
<input type="hidden" name="tab" id="tab-status-agent" value="follow_up">
<select name="user_id" id="select-agent" class="form-control"
onchange="this.form.submit()">
<option value="">All Team Members</option>
<option value="unassigned">Unassigned</option>
<option value="7">Luke Skywalker</option>
<option value="2">Han Solo</option>
<option value="1">Leia Organa</option>
</select>
</form>
</div>
<div class="col-md-5 text-right">
<form data-remote="false" class="d-inline" id="power-dialer-form" action="/calls/power_dialer" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="vqtLpEeM2kh5MP7nZFhFrfrmJhjm6T3IF++8UGmHpHjZP4E9WSOpIsextGJptcRYPIuDBqVWgDkVYeHOn9uWow==">
<button type="submit" name="commit" value="" class="btn btn-primary" id="add-to-power-dialer" disabled="">
<i class="fas fa-phone" title="Add to power dialer"></i>
</button>
</form>
<div class="btn-group" role="group" aria-label="Basic example">
<a class="btn btn-primary" data-toggle="modal" data-target="#assign-leads" title="Assign leads" href="#">
<span class="fas fa-user-check"></span>
</a> <a class="btn btn-primary" data-toggle="modal" data-target="#new-lead" title="New lead" href="#">
<span class="fas fa-user-plus"></span>
</a> <a class="btn btn-primary" data-toggle="modal" data-target="#import-leads" title="Import leads" href="#">
<span class="fas fa-file-import"></span>
</a>
</div>
</div>
<div class="col-md-3">
<div class="input-group search-bar">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon"><i class="fas fa-search"></i></div>
</div>
<input type="search" id="search" class="form-control">
</div>
</div>
</div>
Related
I want to keep text box and button in the same line, but it's coming in two different lines:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-6">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
Make your parent element, containing the input and button element a flex box. I used the bootstrap utility classes to achieve this. I added a small margin to the input element as well, also using a bootstrap utility class.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-12 d-flex">
<input class="form-control mr-1" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
Probably the best way to achieve exactly what you want is something like this
<div class="container">
<div class="row">
<div class="col-sm-8">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<form asp-controller="Expense" asp-action="Index" class="form-group col-sm-4 d-flex">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</form>
</div>
</div>
The "Filter" button goes in the second line since Bootstrap's form-control class has display: block and width: 100%. Change display: inline-block and reduce width: 50%.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-8">
<input class="form-control" type="text" name="SearchString" placeholder="Search" style="display: inline-block; width: 50%;">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-8">
<div class="d-flex">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info ml-2">Filter</button>
</div>
</div>
</form>
</div>
</div>
How do I align the button to the right of the text box, after using form control on the search box, I am able to align the button to the left of the text box but I wish to have it on the right, please help.
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</div>
The search box and button
Fix again!
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
</div>
</div>
Try Input Groups on the form elements, bootstrap by default provides those classes
This is how you make use of them
HTML
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="col-sm-6 pull-right">
<div class ="input-group search-bar">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
<span class="input-group-addon">
<button class="btn search-btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
CSS
.search-bar{
padding:0;
}
.search-bar .input-group-addon{
padding:0;
}
.search-bar .search-btn{
padding:5px 12px;
}
Link for reference
hope this helps..
Just change place them:
Change:
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
To:
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
</div>
</div>
Here is an example of inline search form:
<div class="pull-right">
<form method="get" action="">
<div class="form-group form-inline">
<input type="text" placeholder="search" class="form-control" name="s">
<button title="search" name="search" type="submit" class="btn btn-primary">Search</button>
</div>
</form>
</div>
you can use style=float: right; on button tag to align button to right and then adjust margin and padding accordingly.
Hi for all and thank you for your time.
How can I correctly add a "button / submit" next to a group of button or radio
image: Broken borders of buttons
Thank you again for your help.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<span class="input-group-addon"><i aria-hidden="true" class="fa fa-code-fork"></i></span>
<input name="data[Domain][domain_name]" class="input-sm form-control" placeholder="Nouveau domaine" maxlength="25" id="DomainDomainName" type="text">
<span class="input-group-addon"><small>ajouté à </small></span>
<div class="input-group-btn" data-toggle="buttons">
<label class="btn btn-sm btn-info active">
<input name="data[Domain][type_domain]" id="DomainTypeDomain2" value="2" type="radio"> Location
</label>
<label class="btn btn-sm btn-info">
<input name="data[Domain][type_domain]" id="DomainTypeDomain1" value="1" type="radio"> Service
</label>
</div>
<div class="input-group-btn">
<button class="btn-success btn-sm btn btn-default">
<i aria-hidden="true" class="fa fa-plus-circle"></i>
</button>
</div>
</div>
Just add border-radius: 0px it will work.
Working snippet
#btnrad {
border-radius: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<span class="input-group-addon"><i aria-hidden="true" class="fa fa-code-fork"></i></span>
<input name="data[Domain][domain_name]" class="input-sm form-control" placeholder="Nouveau domaine" maxlength="25" id="DomainDomainName" type="text">
<span class="input-group-addon"><small>ajouté à </small></span>
<div class="input-group-btn" data-toggle="buttons">
<label id="btnrad" class="btn btn-sm btn-info active">
<input name="data[Domain][type_domain]" id="DomainTypeDomain2" value="2" type="radio"> Location
</label>
<label id="btnrad" class="btn btn-sm btn-info">
<input name="data[Domain][type_domain]" id="DomainTypeDomain1" value="1" type="radio"> Service
</label>
</div>
<div class="input-group-btn">
<button class="btn-success btn-sm btn btn-default">
<i aria-hidden="true" class="fa fa-plus-circle"></i>
</button>
</div>
</div>
I have a problem with layout bootstrap. I want the search button to remain at the end of the line.
Here is my code:
<form id="frmTest" class="form-inline">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name"/>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset" >clear</button>
</div>
</form>
<button class="btn btn-warning " id="btn-search">Search</button> //this not part form input
output:
I want the layout like this:
How can this resolved?
1)Place search button into the form.
2) If you don't want to place the search button into the form, then try the below code.
Just, make the form inline.
form {
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form id="frmTest" class="form-inline">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" />
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset">clear</button>
</div>
</form>
<button class="btn btn-warning " id="btn-search">Search</button>
Note: View the output in full page mode.
Hi i'm having trouble resizing the search button so that it will be the same height as the textfield. Thank you in advance!.
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" />
<span class="input-group-addon">
<button type="submit" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
You can use Input Group instead of Input Group Addon and change the button to match the input size of small. See example Snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" /> <span class="input-group-btn">
<button type="submit" class="btn btn-default btn-sm" type="button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
<!-- /input-group -->