NiceDevelopmentq
Reputation: 525
Right align button in form
I'm having some trouble using float: right; on a button.
Whatever I do, the button just doesn't wanna go to the right. It's the second button, the one with the "advanced-search-button" class.
I'm using Bootstrap 4.
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="box">
<div class="box-title w-100">
<h5>Opgaver</h5>
</div>
<div class="box-form w-100">
<form action="" class="form-inline">
<div class="form-group form-group-custom">
<input type="text" class="form-control" placeholder="Rekvirent">
</div>
<div class="form-group form-group-custom">
<input type="text" class="form-control" placeholder="Tildelt til">
</div>
<div class="form-group form-group-custom">
<select name="select_Afsluttet" id="select_Afsluttet" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Afsluttet</option>
<option value="">Ja</option>
<option value="">Nej</option>
<option value="">Alle</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Godkendt" id="select_Godkendt" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Godkendt</option>
<option value="">Ja</option>
<option value="">Nej</option>
<option value="">Alle</option>
</select>
</div>
<div class="form-group form-group-custom float-sm-right">
<button type="button" class="btn btn-success btn-sm" style="margin-right: 15px;">Søg</button>
<button type="button" class="btn btn-primary btn-sm advanced-search-button" onclick="advancedSearch(this)">Avanceret søgning</button>
</div>
</form>
<form action="" class="form-inline form-custom advanced-search">
<div class="form-group form-group-custom">
<select name="select_Prioritet" id="select_Prioritet" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Prioritet</option>
<option value="">Lav</option>
<option value="">Middel</option>
<option value="">Høj</option>
<option value="">Straks</option>
<option value="">Driftfejl</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Opgavestatus" id="select_Opgavestatus" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Opgavestatus</option>
<option value="">Arkiveret</option>
<option value="">Sendt til DUC</option>
<option value="">Venter på bruger</option>
<option value="">Venter på kunde</option>
<option value="">Venter på AO</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Opgavetype" id="select_Opgavetype" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Opgavetype</option>
<option value="">Andet</option>
<option value="">Sendt til DUC</option>
<option value="">Venter på bruger</option>
<option value="">Venter på kunde</option>
<option value="">Venter på AO</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Underkategori" id="select_Underkategori" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Underkategori</option>
<option value="">Via telefon</option>
<option value="">Via email</option>
<option value="">Internet</option>
<option value="">Intranet</option>
<option value="">VMS</option>
</select>
</div>
<div class="form-group form-group-custom">
<input type="text" class="form-control" placeholder="Søg efter">
</div>
</form>
</div>
<div class="box-content">
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Dato</th>
<th scope="col">ID</th>
<th scope="col">Rekv</th>
<th scope="col">Tildelt</th>
<th scope="col">Beskrivelse</th>
<th scope="col">Type</th>
<th scope="col">Seneste log besked</th>
<th scope="col">Deadline</th>
</tr>
</thead>
<tbody>
<tr>
<td>22-11-2017</td>
<td>70935</td>
<td>HJR</td>
<td>LUC</td>
<td>Docking Station...</td>
<td>Bestilling - Via Telefon</td>
<td>8 dage</td>
<td>22-11-2017</td>
</tr>
<tr>
<td>28-11-2017</td>
<td>71049</td>
<td>LLJ</td>
<td>LUC</td>
<td>Kan ikke scanne fra sin printe....</td>
<td>IT-Drift - Via Telefon</td>
<td>3 dage</td>
<td>28-11-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
</tbody>
</table>
</div>
</div>I hope you can help me :)
I don't have any custom CSS for this part, I only use the classes for JS.
Upvotes: 0
Views: 628
Answers (3)
VXp
Reputation: 12118
You can do something like this with the Flexbox:
.flex-container {display:flex} /* displays children inline by default */
.flex-item {
display: flex;
justify-content: space-between; /* horizontal alignment / creates the max. horizontal space between the buttons */
flex: 1 !important; /* takes all the remaining horizontal space / needs to have the !important keyword otherwise it doesn't work */
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="box">
<div class="box-title w-100">
<h5>Opgaver</h5>
</div>
<div class="box-form w-100">
<form action="" class="form-inline flex-container">
<div class="form-group form-group-custom">
<input type="text" class="form-control" placeholder="Rekvirent">
</div>
<div class="form-group form-group-custom">
<input type="text" class="form-control" placeholder="Tildelt til">
</div>
<div class="form-group form-group-custom">
<select name="select_Afsluttet" id="select_Afsluttet" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Afsluttet</option>
<option value="">Ja</option>
<option value="">Nej</option>
<option value="">Alle</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Godkendt" id="select_Godkendt" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Godkendt</option>
<option value="">Ja</option>
<option value="">Nej</option>
<option value="">Alle</option>
</select>
</div>
<div class="form-group form-group-custom flex-item">
<button type="button" class="btn btn-success btn-sm" style="margin-right: 15px;">Søg</button>
<button type="button" class="btn btn-primary btn-sm advanced-search-button" onclick="advancedSearch(this)">Avanceret søgning</button>
</div>
</form>
<form action="" class="form-inline form-custom advanced-search">
<div class="form-group form-group-custom">
<select name="select_Prioritet" id="select_Prioritet" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Prioritet</option>
<option value="">Lav</option>
<option value="">Middel</option>
<option value="">Høj</option>
<option value="">Straks</option>
<option value="">Driftfejl</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Opgavestatus" id="select_Opgavestatus" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Opgavestatus</option>
<option value="">Arkiveret</option>
<option value="">Sendt til DUC</option>
<option value="">Venter på bruger</option>
<option value="">Venter på kunde</option>
<option value="">Venter på AO</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Opgavetype" id="select_Opgavetype" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Opgavetype</option>
<option value="">Andet</option>
<option value="">Sendt til DUC</option>
<option value="">Venter på bruger</option>
<option value="">Venter på kunde</option>
<option value="">Venter på AO</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Underkategori" id="select_Underkategori" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Underkategori</option>
<option value="">Via telefon</option>
<option value="">Via email</option>
<option value="">Internet</option>
<option value="">Intranet</option>
<option value="">VMS</option>
</select>
</div>
<div class="form-group form-group-custom">
<input type="text" class="form-control" placeholder="Søg efter">
</div>
</form>
</div>
<div class="box-content">
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Dato</th>
<th scope="col">ID</th>
<th scope="col">Rekv</th>
<th scope="col">Tildelt</th>
<th scope="col">Beskrivelse</th>
<th scope="col">Type</th>
<th scope="col">Seneste log besked</th>
<th scope="col">Deadline</th>
</tr>
</thead>
<tbody>
<tr>
<td>22-11-2017</td>
<td>70935</td>
<td>HJR</td>
<td>LUC</td>
<td>Docking Station...</td>
<td>Bestilling - Via Telefon</td>
<td>8 dage</td>
<td>22-11-2017</td>
</tr>
<tr>
<td>28-11-2017</td>
<td>71049</td>
<td>LLJ</td>
<td>LUC</td>
<td>Kan ikke scanne fra sin printe....</td>
<td>IT-Drift - Via Telefon</td>
<td>3 dage</td>
<td>28-11-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
</tbody>
</table>
</div>
</div>I've made it to work by adding two additional classes (.flex-container & .flex-item) and applying certain flex properties with appropriate values.
I applied the .flex-container class to the form element which is the parent of all the .form-group / .form-group-custom div's, and the .flex-item class to the parent of the buttons.
Upvotes: 1
user9034600
Reputation: 1
U can as well use the CSS property of top n left. Set the values in pixel. And the button should have a position property value to absolute. It worked for mine.
Upvotes: 0
Ylama
Reputation: 2489
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="box-form w-100">
<form action="" class="">
<div class="form-group col-sm-9 d-inline-block form-group-custom float-left">
<button type="button" class="btn btn-success float-left btn-sm" style="margin-right: 15px;">Søg</button>
<button type="button" class="btn btn-primary float-right btn-sm advanced-search-button" onclick="advancedSearch(this)">Avanceret søgning</button>
</div>
</form>
</div>Removed the class form-inline form and added w-100 for the first div within form.
Upvotes: 0
Related Questions
- alignment of elements in a button
- Align button to the right
- Button not aligning right
- Align button to bottom right of form
- Aligning a button outside html form with the form
- proper way to right align buttons on a bootstrap based web form?
- Aligning the content inside the button
- Bootstrap 4, can't align button to right
- Align Button with Input
- How right align bootstrap form button?