I have two buttons a dropdown and a text input that I want to vertically align. They are barely off by 1 px, but they are off and it is driving me nuts.
See the code below:
<div style="text-align:center;padding-top:85px">
<form role="form" class="form-inline ">
<div class="form-group">
<select class="form-control selectWidth" style="width:auto">
<option> Primary Care Physician </option>
<option> Dermatologist </option>
<option> Orthodontist </option>
</select>
</div>
<input type="text" class="form-control" placeholder="Enter Zip Code">
</form>
</div>
HTML:
<div ng-repeat="param" class="test row">
<div class="col-sm-4">
<select class="form-control">
<option> Primary Care Physician </option>
<option> Dermatologist </option>
<option> Orthodontist </option>
</select>
</div>
<div class="col-sm-8">
<input type="url" class="form-control col-sm-8 invalidInput" placeholder="Enter Zip Code">
</div>
</div>
CSS:
.test{
width:50%;
}
See JsFiddle
Related
I have tried to place a search form into 2 parent divs. Whether I try the align or justify utility neither of them are able to center the search bar in the middle of the page, where I want it.
<div class="col">
<div class"container-fluid justify-content-center" id="searchform">
<form class="form-floating form-control-sm" id="form">
<div class="row " id="div_main">
<div class="col-auto " id="div_Location">
<label for="Location">Hunt Location</label><br>
<select name="cars" id="Location">
<option value="Gauteng">Gauteng</option>
<option value="Western Cape">Western Cape</option>
<option value="Northern Cape">Northern Cape</option>
<option value="North West">North West</option>
<option value="Limpopo">Limpopo</option>
<option value="Free State">Free State</option>
<option value="Mpumalanga">Mpumalanga</option>
<option value="Eastern cape">Eastern Cape</option>
<option value="Kwa-zulu Natal">kwa-zulu Natal</option>
</select>
</div>
<div class="col-auto" id="div_Animal">
<label for="Animal">Animal</label><br>
<select name="Animals" id="Animal">
<option value="" id="ListAnimal"></option>
</select>
</div>
<div class="col-auto" id="div_Check-in">
<label for="Check-in">Check-in</label>
<input type="date" class="form-control" id="Check-in" placeholder="Check-in" value="">
</div>
<div class="col-auto" id="div_Check-out">
<label for="floatingInputValue">Check-out</label>
<input type="date" class="form-control" id="Check-out" placeholder="Check-out" value="">
</div>
<div class="col-auto" id="div_Hunters">
<label for="Hunters">Hunters</label>
<input type="number" class="form-control" id="Hunters" placeholder="5" value="">
</div>
<div class="col-auto">
<button type="button" class="btn btn-dark d-iline" id="searchbutton"><img src="img/search.png"></img></button>
</div>
</div>
</form>
</div>
</div>
The default behavior of col is to take up 100% of the available space, so justify-content-center won't have any meaningful effect as the column is already at a width of 100% and cannot be centered relative to the parent container.
If we clean up your code the results you expect can be achieved fairly easily (Note: You will need to run this snippet full screen to see it centered).
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-auto" id="search-form">
<form class="form-floating form-control-sm" id="form">
<div class="form-row" id="div_main">
<div class="col-auto" id="div_Location">
<label for="Location">Hunt Location</label><br>
<select name="cars" id="Location" class="custom-select">
<option value="Gauteng">Gauteng</option>
<option value="Western Cape">Western Cape</option>
<option value="Northern Cape">Northern Cape</option>
<option value="North West">North West</option>
<option value="Limpopo">Limpopo</option>
<option value="Free State">Free State</option>
<option value="Mpumalanga">Mpumalanga</option>
<option value="Eastern cape">Eastern Cape</option>
<option value="Kwa-zulu Natal">kwa-zulu Natal</option>
</select>
</div>
<div class="col-auto" id="div_Animal">
<label for="Animal">Animal</label><br>
<select name="Animals" id="Animal" class="custom-select">
<option value="" id="ListAnimal"></option>
</select>
</div>
<div class="col-auto" id="div_Check-in">
<label for="Check-in">Check-in</label>
<input type="date" class="form-control" id="Check-in" placeholder="Check-in" value="">
</div>
<div class="col-auto" id="div_Check-out">
<label for="floatingInputValue">Check-out</label>
<input type="date" class="form-control" id="Check-out" placeholder="Check-out" value="">
</div>
<div class="col-auto" id="div_Hunters">
<label for="Hunters">Hunters</label>
<input type="number" class="form-control" id="Hunters" placeholder="5" value="">
</div>
<div class="col-auto align-self-end">
<button type="button" class="btn btn-dark" id="searchbutton">Search</button>
</div>
</div>
</form>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
First I've applied the correct Grid components of container-fluid and row to make sure that everything is lined up as one would expect within Bootstrap. You may have omitted that for brevity but I wanted to make sure it was shown.
Changing .col to .col-auto will allow the form's parent element to take up only as much width as needed, which will allow justify-content-center to center the column when applied to row.
If you don't want to apply that class to the row wrapper, you can apply mx-auto to the col-auto wrapper.
A couple of house-keeping notes:
As isherwood stated in the comments, your original use of an additional container element is not needed, and is in fact frowned upon as it can result in unexpected issues.
The <img> tag is self-closing, meaning you should format it either as <img src="..." /> or without the self-closing slash. </img> does not exist.
Is it ok to put <h3> inside <form> like below ?
<form>
<h3>Business Information</h3>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="TypeOfEntity" class="form-font">Type of Entity</label><br>
<select class="form-control" id="TypeOfEntity">
<option selected disabled >Select</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="NoOfDirection" class="form-font">No of Direction</label><br>
<select class="form-control" id="NoOfDirection">
<option selected disabled >Select</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="EntityName" class="form-font">Entity Name</label><br>
<input class="form-control" id="EntityName" placeholder="Select">
</div>
</div>
</div>
</form>
You can allways check validation on validator.w3.org
In my opinion you can put it inside or outside of the form tag.
Depending on how reusable your component will be.
If you use same form in multiple places but you want to change the title than put it outside the form. Else you can leave it inside the form tag.
I try to add a checkbox after all my <select> dropdowns but in the same row / line. I have a really hard time doing so, I tried quite some time now and I can't get it to work on my own. The CSS comes from Bootstrap 3.
Here is how my Code and Form looks like:
<form role="form" id="newchar" name="newchar" method="POST" action="inc/insertchar.php">
<div class="row">
<div class="form-group col-sm-3">
<label for="charname">Charactername</label>
<a href="#" data-toggle="tooltip" data-placement="right" title="maximal 16 Zeichen - bestehend aus Zahlen und Buchstaben">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</a>
<input type="text" class="form-control" name="charname" id="charname" placeholder="Charactername" required="required" />
</div>
</div>
<div class="row">
<div class="form-group col-sm-3">
<label for="c1">Circles:</label>
<div class="form-group">
<select name="circle_1" id="c1" class="form-control circle-select">
<option value="">Circle 1</option>
<option value="class_1">Archer</option>
<option value="class_2">Cleric</option>
<option value="class_3">Swordsman</option>
<option value="class_4">Wizard</option>
</select>
</div>
<div class="form-group">
<select name="circle_2" id="c2" class="form-control circle-select" disabled="disabled">
<option value="">select Circle 1 first</option>
</select>
</div>
<div class="form-group">
<select name="circle_3" id="c3" class="form-control circle-select" disabled="disabled">
<option value="">select Circle 2 first</option>
</select>
</div>
<!-- and more ... -->
Full Code and Preview: https://jsfiddle.net/hd7fzp95/
You need to use form-inline class on your form.
http://www.bootply.com/WpiddtxsOh
I'm having difficulty placing two and one text input in a single row in my form. I am able to get the two selects inline but the text input is being stubborn. Here is how it looks with the current code:
<form role='form' action='#' method='post'>
<div class='form-group'>
<label for='query-bar' class='sr-only'></label>
<input type='text' class='form-control' placeholder='Enter search query..' name='query-bar' />
</div>
<div class='form-inline'>
<div class='form-group'>
<select name='builder-columns' class='form-control'>
<option selected disabled value='none'>Columns</option>
<option></option>
</select>
</div>
<div class='form-group'>
<select name='builder-operators' class='form-control'>
<option selected disabled value='none'>Operators</option>
</select>
</div>
<div class='form-group'>
<label for='builder-filter' class='sr-only'></label>
<input type='text' placeholder='Filter' name='builder-filter' class='form-control' />
</div>
</div>
</form>
You could use the following:
<div class='form-inline row'>
<div class='form-group col-sm-4'>
<select name='builder-columns' class='form-control'>
<option selected disabled value='none'>Columns</option>
</select>
</div>
<div class='form-group col-sm-4'>
<select name='builder-operators' class='form-control'>
<option selected disabled value='none'>Operators</option>
</select>
</div>
<div class='form-group col-sm-4'>
<label for='builder-filter' class='sr-only'></label>
<input type='text' placeholder='Filter' name='builder-filter' class='form-control' />
</div>
</div>
.form-inline .form-control {
width: 100%;
}
The class row was added to the form-inline elements, and the class col-sm-4 was added to the form-group elements. In addition, the width of the .form-control elements was set to 100% in order to overwrite width: auto which is applied at certain screen sizes.
Example Here
I have this code snippet, but this renders dropdown after line break, What's the best bootstrap 3 col class to get it correct? (select dropdown next to input medium-inline)
<form class="form-horizontal well" >
<div class="form-group">
<label class="col-lg-2 control-label">Memory</label>
<div class="col-lg-4">
<div>
<input id="memory" type="text" class="form-control">
</div>
<div class="col-lg-4">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</div>
</div>
</form>
Ok, this is how I would do it.
First add the form-inline class to your form.
Then remove the col-lg classes from labels and inputs.
Also remove all un-needed divs too, which results in the below html:
Markup
<form class="form-inline well" >
<div class="form-group">
<label class="control-label">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Screen grab
If you want your form-fields to align horizontally - you can actually use the inline form. eg:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="memory">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Note: not tested in an actual browser...