I'm trying to create a form that includes an input-group. I use the 'col'-classes of bootstrap to style it, but when this is combined with the 'input-group'-class, the padding of the columns are removed.
I would like the date and name input-field to be aligned.
Here is my JSFiddle
HTML
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 col-xs-2 control-label">Date</label>
<div class="col-sm-4 col-xs-4 input-group">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-xs-2 control-label">Name</label>
<div class="col-sm-4 col-xs-4">
<input type="text" class="form-control" />
</div>
</div>
</div>
<br><br>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 col-xs-2 control-label">Date</label>
<div class="col-sm-4 col-xs-4">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-xs-2 control-label">Name</label>
<div class="col-sm-4 col-xs-4">
<input type="text" class="form-control" />
</div>
</div>
</div>
Any help is appreciated!
The input-group class should not be combined with any other, as indicated in their examples (http://getbootstrap.com/components/#input-groups):
<div class="row">
<div class="col-lg-6">
<div class="input-group">
[...]
</div>
</div>
</div>
Try this:
<div class="form-group">
<label class="col-sm-2 col-xs-2 control-label">Date</label>
<div class="col-sm-4 col-xs-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Related
Can anybody tell how to arrange horizontal text box in same row eve though label will be in different line
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label">Roll number <br> Student Code:</label>
<input type="text" class="form-control">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label">School code:</label>
<input type="text" class="form-control ">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label>Year Of Passing:</label>
<input type="text" class="form-control">
</div>
</div>
</div>
You can add w-50 d-inline-block class to input and w-25 to label as below
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label w-25">Roll number <br> Student Code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">School code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">Year Of Passing:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>
You can wrap input in a div with col-x attribute and add row class to form-group.
An example:
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
The full example here:
https://stackblitz.com/edit/js-bootstrap-css?file=index.html
<div class="row">
<div class="col-12">
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-3 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">School code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">Year Of Passing:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
I have a user registration form (Bootstrap 4 - in Razor Template)
I will hide some part of form depends on user fillings. My registration form has 2 step. Here is second step.
If user selects a country that hasn't states. I will hide states.
Here is the problem.
If I write code like in here when i hide states that part will be missing.
I wrote code like below using float-left. If I hide any part the other parts moves and fill the missing part.
<div class="container py-5 bg-warning">
<div class="row">
<div id="register" class="col-md-10 mx-auto">
<form asp-action="Create" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
#if (#Model.StateList != null)
{
<div class="form-group col-sm-6 float-left">
<label asp-for="State"></label>
#Html.DropDownListFor(m => m.StateList, #Model.StateList, "- Please Select -",
new {#class = "form-control"})
<span asp-validation-for="State" class="text-danger fixed-span"></span>
</div>
}
<div class="form-group col-sm-6 float-left">
<label asp-for="City"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Phone"></label>
<input asp-for="Phone" class="form-control" />
<span asp-validation-for="Phone" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Company"></label>
<input asp-for="Company" class="form-control" />
<span asp-validation-for="Company" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="TaxId"></label>
<input asp-for="TaxId" class="form-control" />
<span asp-validation-for="TaxId" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Email"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Gender"></label>
#Html.DropDownListFor(m => m.Gender, #Model.GenderList, "- Please Select -",
new {#class = "form-control"})
<span asp-validation-for="Gender" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="ConfirmPassword"></label>
<input asp-for="ConfirmPassword" class="form-control" />
<span asp-validation-for="ConfirmPassword" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="AboutJob"></label>
<input asp-for="AboutJob" class="form-control" />
<span asp-validation-for="AboutJob" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="PostCode"></label>
<input asp-for="PostCode" class="form-control" />
<span asp-validation-for="PostCode" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Town"></label>
<input asp-for="Town" class="form-control" />
<span asp-validation-for="Town" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Address"></label>
<input asp-for="Address" class="form-control" />
<span asp-validation-for="Address" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Celluar"></label>
<input asp-for="Celluar" class="form-control" />
<span asp-validation-for="Celluar" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="TaxOffice"></label>
<input asp-for="TaxOffice" class="form-control" />
<span asp-validation-for="TaxOffice" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="TaxAddress"></label>
<input asp-for="TaxAddress" class="form-control" />
<span asp-validation-for="TaxAddress" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="FullName"></label>
<input asp-for="FullName" class="form-control" />
<span asp-validation-for="FullName" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Birthday"></label>
<input asp-for="Birthday" class="form-control" />
<span asp-validation-for="Birthday" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="CitizenId"></label>
<input asp-for="CitizenId" class="form-control" />
<span asp-validation-for="CitizenId" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6 float-left">
<label asp-for="Website"></label>
<input asp-for="Website" class="form-control" />
<span asp-validation-for="Website" class="text-danger fixed-span"></span>
</div>
<button type="submit" class="btn btn-primary px-4 float-right">Kayıt Ol</button>
</form>
</div>
</div>
As you know there is a span element for error messages under inputs. If I had an error this form looks bad. Do you have any idea to fix this attached in picture
Simple css trick solved my problem.
<style>
.form-group {
height: 80px !important;
}
</style>
Remove float-left class and add parent row class -
<div class="row">
#if (#Model.StateList != null)
{
<div class="form-group col-sm-6">
<label asp-for="State"></label>
#Html.DropDownListFor(m => m.StateList, #Model.StateList, "- Please Select -",
new {#class = "form-control"})
<span asp-validation-for="State" class="text-danger fixed-span"></span>
</div>
}
<div class="form-group col-sm-6">
<label asp-for="City"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Phone"></label>
<input asp-for="Phone" class="form-control" />
<span asp-validation-for="Phone" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Company"></label>
<input asp-for="Company" class="form-control" />
<span asp-validation-for="Company" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="TaxId"></label>
<input asp-for="TaxId" class="form-control" />
<span asp-validation-for="TaxId" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Email"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Gender"></label>
#Html.DropDownListFor(m => m.Gender, #Model.GenderList, "- Please Select -",
new {#class = "form-control"})
<span asp-validation-for="Gender" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="ConfirmPassword"></label>
<input asp-for="ConfirmPassword" class="form-control" />
<span asp-validation-for="ConfirmPassword" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="AboutJob"></label>
<input asp-for="AboutJob" class="form-control" />
<span asp-validation-for="AboutJob" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="PostCode"></label>
<input asp-for="PostCode" class="form-control" />
<span asp-validation-for="PostCode" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Town"></label>
<input asp-for="Town" class="form-control" />
<span asp-validation-for="Town" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Address"></label>
<input asp-for="Address" class="form-control" />
<span asp-validation-for="Address" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Celluar"></label>
<input asp-for="Celluar" class="form-control" />
<span asp-validation-for="Celluar" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="TaxOffice"></label>
<input asp-for="TaxOffice" class="form-control" />
<span asp-validation-for="TaxOffice" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="TaxAddress"></label>
<input asp-for="TaxAddress" class="form-control" />
<span asp-validation-for="TaxAddress" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="FullName"></label>
<input asp-for="FullName" class="form-control" />
<span asp-validation-for="FullName" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Birthday"></label>
<input asp-for="Birthday" class="form-control" />
<span asp-validation-for="Birthday" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="CitizenId"></label>
<input asp-for="CitizenId" class="form-control" />
<span asp-validation-for="CitizenId" class="text-danger fixed-span"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="Website"></label>
<input asp-for="Website" class="form-control" />
<span asp-validation-for="Website" class="text-danger fixed-span"></span>
</div>
</div>
I'd like to achieve a grid like down below. There's a problem because I've got form-group as well. And the problem is, col-md-6 before last and the last one doesn't align correctly.
<form action="">
<div class="col-md-1 pull-right text-right padding-right-0">
<div class="action-buttons">
<a href="#" class="pull-right button-edit-content" data-target="#s3">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="form-group col-md-6">
<label for="">label_1</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_2</label>
<input type="text">
</div>
<div class="form-group col-md-6">
<label for="">label_3</label>
<input type="text">
</div>
<div class="form-group col-md-5">
</div>
<div class="form-group col-md-6">
<label for="">label_5</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_6</label>
<input type="text">
</div>
</form>
Try wrapping them in row, like
<div class="row">
<div class="form-group col-md-6">
<label for="">label_1</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_2</label>
<input type="text">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="">label_3</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<div> </div>
</div>
</div>
I think I see what you're trying to do. I think the problem is the empty column which doesn't have a comparable height to the others.
I'd suggest removing that empty column and clearing the left of the following one by adding a class to it as in this fiddle: https://jsfiddle.net/vv807bax/
CSS:
.clearleft {
clear: left;
}
HTML:
<div class="container">
<div class="row">
<form action="">
<div class="col-md-1 pull-right text-right padding-right-0">
<div class="action-buttons">
<a href="#" class="pull-right button-edit-content" data-target="#s3">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="form-group col-md-6">
<label for="">label_1</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_2</label>
<input type="text">
</div>
<div class="form-group col-md-6">
<label for="">label_3</label>
<input type="text">
</div>
<div class="form-group col-md-6 clearleft">
<label for="">label_5</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_6</label>
<input type="text">
</div>
</form>
</div>
</div>
Due to the boot strap design, the keyboard tab key is working vertically(col wise) instead of horizontally.
Can I make the keyboard tab key behavior horizontal(default behavior) without changing the design
This is the section of code.
<div class="col-md-4">
<div class="form-group col-md-12">
<span class="col-md-6">
<select ng-model="typeId" required=""><option value="" class="" selected="selected">--SELECT--</option>
<option label="Employment" value="number:2">Employment</option>
<option label="Female" value="number:3">Female</option>
<option label="Food" value="number:4">Food</option>
<option label="Male" value="number:1">Male</option>
</select>
</span>
</div>
<div class="form-group col-md-12" ">
<span class="col-md-6">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</span>
</div>
<div class="form-group col-md-12">
<span class="col-md-6">
<select ng-model="nId" ng-options="non.nId as non.nlity for non in List" ng-invalid-required" name="nationality" id="nationality" required="">
</select>
</span>
</div>
<div class="form-group col-md-12">
</div>
<div class="form-group col-md-12">
<label class="col-md-6" for="profession">Profession:</label>
<span class="col-md-6">
<select ng-model="rpationId" ng-options="ocp.rpationId as ocp.occupation for ocp in occupationList" >\
</select>
</span>
</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12" ng-class="{ 'has-error' : regCtrl.userForm.mmpId.$invalid && regCtrl.userForm.mmpId.$dirty }">
<label class="col-md-6" for="mmpId">MMP Id: *</label>
<span class="col-md-6">
<input type="text" name="mmpId" class="form-control ">
</span>
<div class="col-sm-6 error-color ng-scope ng-active" >
<span ng-message="required" class="ng-scope">This field is required</span>
</div>
</div>
<div class="form-group col-md-12" >
<label class="col-md-6" for="name">Name: *</label>
<span class="col-md-6">
<input type="text" name="name" ng-maxlength="250">
</span>
</div>
<div class="form-group col-md-12" >
<label class="col-md-6" for="dob">Date of Birth: *</label>
<span class="col-md-6">
<input type="date" name="dob" ng-maxlength="11">
</span>
</div>
<div class="form-group col-md-12" ng-class="">
<label class="col-md-6" for="contactNo">Contact No: *</label>
<span class="col-md-6">
<input type="number" name="contactNo" required="">
</span>
</div>
</div>
This is because of your grouping of the form elements. You are grouping the elements column wise hence the tab works column wise.
You have grouped 4 form elements in first col-md-4 and the next 4 in the second col-md-4 so default tab control will first cover first col-md-4 elements and then the next col-md-4 elements.
Either use tabindex or change your layout to row wise as below:
<div class="row">
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
<div class="col-md-4">
<div class="form-group col-md-12">
<input type="text" name="nameAr" required="" ng-maxlength="250">
</div>
</div>
</div>
Hope it helps.
i have a form within a panel in my html using bootstrap and it seems like all my panels are well adjusted except for the one which has date and the one used to upload files in it.
they have more width than the other form groups because of the button next to them. so my question is how can i modify it to get the same width as the other form groups.
<div class=" col-md-6 col-sm-6 ">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class=" col-md-3 col-sm-3 col-xs-3 ">
<font size="4" ></font>
</div>
<div class=" col-md-8 col-sm-8 col-xs-8 ">
<font size="6" >إضافـــــة أرشيــــف </font>
</div>
</div>
</div>
<br>
<form class="form-horizontal" id="form" action="/insertArchive/" method="post" enctype="multipart/form-data">{% csrf_token %}
<div class="form-group">
<label class="col-sm-4 control-label">إســـم اﻷرشيف</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="name" id="name">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">الرقم اﻹشاري</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="ref_num" id="ref_num">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">المجلد</label>
<div class="col-sm-6">
<select class="form-control" name="section_id" id="section_id">
{% for sectidon in list %}
<option value="{{sectidon.id}}">{{sectidon.name}}</option>
{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">ملاحظات</label>
<div class="col-sm-6">
<textarea class="form-control" rows="3" name="text" id="text"></textarea>
</div>
</div>
<!-- test -->
<div class="form-group">
<label class="col-sm-4 control-label">الملحقات</label>
<div class="contacts col-sm-6">
<label>إصافة ملف :</label>
<div class="form-group multiple-form-group input-group file">
<input type="file" name="file[]" class="form-control" >
<input type="text" name= "file_name[]" class="form-control" >
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-add">+</button>
</span>
</div>
</div>
</div>
</div>
<!-- test -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">حفـــظ</button>
</div>
</div>
</form>
</div>
</div>
Your problem is, that you have a .form-group class within a .form-group.
So change:
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
to:
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Working example