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>
Related
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>
I am an bit new to Bootstrap but I can't ind it anywhere on the manual how to give the add on in the last line (where the txt is 'cm') the dimensions as the previous 3 lines.
<!-- width right -->
<div id="div_widthRight" class="form-group has-warning">
<label for="widthRight" class="col-sm-3 control-label">Breedte rechts</label>
<div class="col-sm-9">
<div class="input-group">
<input type="number" class="form-control" id="widthRight" name="width_right" min="20" max="252" value="" data-preview="preview_hl_right" onkeyup="validate()" onclick="validate()">
<span class="input-group-addon">cm</span>
</div>
</div>
</div>
<!-- height -->
<div id="div_height" class="form-group has-warning">
<label for="height" class="col-sm-3 control-label">Hoogte</label>
<div class="col-sm-9">
<div class="btn-group">
<button type="button" class="btn btn-default" id="height_1" name="height" value="1" data-preview="preview_hl_height" onclick="validate_but(this);validate()">14,5</button>
<button type="button" class="btn btn-default" id="height_2" name="height" value="2" data-preview="preview_hl_height" onclick="validate_but(this);validate()">29,0</button>
<button type="button" class="btn btn-default" id="height_3" name="height" value="3" data-preview="preview_hl_height" onclick="validate_but(this);validate()">43,5</button>
<button type="button" class="btn btn-default" id="height_4" name="height" value="4" data-preview="preview_hl_height" onclick="validate_but(this);validate()">58,0</button>
<span class="input-group-addon">cm</span>
</div>
</div>
</div>
Or is it because I am using different classes? But to get this aligned correct?
This is what I am trying to get.
When adding the input-group class to btn-group.
Width 0 on the input-group-addon. I have this result:
When only adding Width 0 on the input-group-addon.
I have edited my answer since my first answer did not work properly in all resolutions. I think this is one way to achieve what you want. I have changed some of your bootstrap classes.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="div_height" class="form-group has-warning">
<label for="height" class="col-sm-3 control-label">Hoogte</label>
<div class="col-sm-9">
<div class="input-group-btn">
<span class="input-group-btn">
<button type="button" class="btn btn-default" id="height_1" name="height" value="1" data-preview="preview_hl_height" onclick="validate_but(this);validate()">14,5</button>
<button type="button" class="btn btn-default" id="height_2" name="height" value="2" data-preview="preview_hl_height" onclick="validate_but(this);validate()">29,0</button>
<button type="button" class="btn btn-default" id="height_3" name="height" value="3" data-preview="preview_hl_height" onclick="validate_but(this);validate()">43,5</button>
<button type="button" class="btn btn-default" id="height_4" name="height" value="4" data-preview="preview_hl_height" onclick="validate_but(this);validate()">58,0</button>
</span>
<span class="input-group-addon">cm</span>
</div>
</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 -->
I'm trying to make these radio buttons clickable in the browser. I found an example at this link here but the same implementation isn't working in my browser, nor here in the snippet. The change color when moused over, and get darker again when depress, but they don't retain that information or display a check mark like they do in the example I found.
What's missing here?
.btn span.glyphicon {
opacity: 0;
}
.btn.active span.glyphicon {
opacity: 1;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="well well-sm text-center">
<h3>Radio</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" for="option1" active">
<input type="radio" name="options" id="option1" autocomplete="off" chacked>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary" for="option2">
<input type="radio" name="options" id="option2" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info" for="option3">
<input type="radio" name="options" id="option3" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default" for="option4">
<input type="radio" name="options" id="option4" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning" for="option5">
<input type="radio" name="options" id="option5" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger" for="option6">
<input type="radio" name="options" id="option6" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
</div>
</div>
you didnt have the bootstrap js file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
.btn span.glyphicon {
opacity: 0;
}
.btn.active span.glyphicon {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1 class="text-center">Checkbox/Radio - CSS Only</h1>
</div>
<div class="container">
<div class="well well-sm text-center">
<h3>Checkbox</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="checkbox" autocomplete="off" checked />
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
</div>
</div>
<div class="container">
<div class="well well-sm text-center">
<h3>Radio</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" name="options" id="option2" autocomplete="off" chacked/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option1" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info">
<input type="radio" name="options" id="option2" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning">
<input type="radio" name="options" id="option2" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option2" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
</div>
</div>
Its a class of btn-group which requires the javascript to be imported as well. It is basically this with style.