I got a form-group that I've customized for large and small displays. The markup is as follows:
<div class="form-group row">
#Html.LabelFor(model => model.ValidFrom, "Valid from", htmlAttributes: new { #class = "col-lg-3 col-sm-3 col-form-label" })
<div class="col-lg-4 col-sm-9">
#Html.EditorFor(model => model.ValidFrom, new { htmlAttributes = new { #class = "form-control", type = "date" } })
</div>
#Html.LabelFor(model => model.ValidTo, "to", htmlAttributes: new { #class = "col-lg-1 col-sm-3 col-form-label" })
<div class="col-lg-4 col-sm-9">
#Html.EditorFor(model => model.ValidTo, new { htmlAttributes = new { #class = "form-control", type = "date" } })
</div>
</div>
It works pretty well, when the display is wide it shows all content on one line making up 12 columns, and when smaller it breaks it up into two lines.
However, the two lines are packed tight together, and doesn't have the nice spacing the rest of the form groups have.
Any css class I'm missing?
-- EDIT --
HTML:
<div class="form-group row">
<label class="col-lg-3 col-3 col-form-label" for="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidFrom">Valid from</label>
<div class="col-lg-4 col-9">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field ValidFrom must be a date." id="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidFrom" name="Triggers[39a5c999-81dc-46bf-80f0-b6450f2821b7].Actions[9207165e-9c24-4928-a2ff-503a7f9779dd].MvaMapping[b3c825b7-e5fc-4812-8339-baae0a7ac16a].ValidFrom" type="date" value="">
</div>
<label class="col-lg-1 col-3 col-form-label" for="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidTo">to</label>
<div class="col-lg-4 col-9">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field ValidTo must be a date." id="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidTo" name="Triggers[39a5c999-81dc-46bf-80f0-b6450f2821b7].Actions[9207165e-9c24-4928-a2ff-503a7f9779dd].MvaMapping[b3c825b7-e5fc-4812-8339-baae0a7ac16a].ValidTo" type="date" value="">
</div>
</div>
You can make use of the margin and padding classes.
.my-2.my-sm-0 // would add a vertical margin on xs devices
Related
I am new to using Bootstrap. I tried adjusting a 3-coulmn row to fit, with the last column divided into another 3, but it overlaps and having difficulty in making it look right.
My cshtml for the 1st row:
<div class="row">
<div class="col-md-4 col-sm-4">
<strong>Last Name</strong> <span class="required">*</span>
#Html.TextBoxFor(m => m.Patient_Lastname, new { #class = "text-primary", required = "required" })
</div>
<div class="col-md-4 col-sm-4">
<strong>First Name</strong> <span class="required">*</span>
#Html.TextBoxFor(m => m.Patient_Firstname, new { #class = "text-primary", required = "required" })
</div>
<div class="col-md-1 col-sm-1">
<strong>birth</strong> <span class="required">*</span>
#Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1900, 119).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
"--Year--", new { #class = "form-control", style = "width: 90px; height:30px;", required = "required" })
</div>
<div class="col-md-1 col-sm-1">
<strong>Month</strong> <span class="required">*</span>
#Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1, 12).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
"--Month--", new { #class = "form-control", style = "width: 90px; height:30px;", required = "required" })
</div>
<div class="col-md-2 col-sm-2">
<strong>Day</strong> <span class="required">*</span>
#Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1, 31).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
"--Day--", new { #class = "form-control", style = "width: 80px; height:30px;", required = "required" })
</div>
</div>
The 2nd and 3rd row are straight forward with col-md-4
Could you help me fix this ?
TIA
Ron.
I think the problem is the input filled width is bigger than available try resizing it.
There is no fixed layout you have to follow so that your screen will look nice automatically! It's your job to try and experiment what's the best to fit your need.
Obviously there is no way for col-sm-1 to fit a dropdown perfectly so you have to think of different layouts for different breakpoints. And bootstrap has many nice CSS classes you can use out of the box already for that purpose.
Extra Small Devices
For extra small devices, you might still be able to put year, month and day dropdown in a single row.
HTML Structure
<form>
<div class="form-row">
<div class="form-group">Last Name Label & Input</div>
<div class="form-group">First Name Label & Input</div>
<div class="form-group">
<div class="form-row">
<div class="form-group col">Year Label & Input</div>
<div class="form-group col">Month Label & Input</div>
<div class="form-group col">Day Label & Input</div>
</div>
</div>
</div>
</form>
I used .form-row here instead of .row because it gives you tighter gutters between columns.
.form-group is used to give each input group a nice margin-bottom.
Use of .col is to give you auto width.
How it looks like
Now you have a layout that works for extra small devices. You kind of start building up from this layout for each different devices with different screen sizes and add necessary CSS classes.
Small Devices
For small devices, you might want to put last name and first name input as 2 columns in a row.
HTML Structure
<form>
<div class="form-row">
<div class="form-group col-sm-6">Last Name Label & Input</div>
<div class="form-group col-sm-6">First Name Label & Input</div>
<div class="form-group col-sm-12">
<div class="form-row">
<div class="form-group col">Year Label & Input</div>
<div class="form-group col">Month Label & Input</div>
<div class="form-group col">Day Label & Input</div>
</div>
</div>
</div>
</form>
See those .col-sm-* classes are added?
How it looks like
...
...
...
Extra Large Devices
HTML Structure
<form>
<div class="form-row">
<div class="form-group col-sm-6 col-xl-4">Last Name Label & Input</div>
<div class="form-group col-sm-6 col-xl-4">First Name Label & Input</div>
<div class="form-group col-sm-12 col-xl-4">
<div class="form-row">
<div class="form-group col">Year Label & Input</div>
<div class="form-group col">Month Label & Input</div>
<div class="form-group col">Day Label & Input</div>
</div>
</div>
</div>
</form>
How it looks like
This is very embarrassing, but I am having a hard time getting it to display correctly. The form below has several controls which display correctly without validation message. However, the controls are shifted when I display the validation's error message; they are all over the place. After reading the bootstrap document and doing quite a bit of searching only, I played around with the clearfix and tried display table with no success. What can I do to prevent the controls from shifting after display a validation message?
Here is the HTML being used.
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">First Name:</p> <label aria-hidden="true" for="FirstName">First Name:</label>
#Html.TextBoxFor(mbox => mbox.FirstName, new { #class = "form-control", id = "FirstName" })
<span id="FirstNameError" class="error" aria-live="assertive" style="display:block; padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Middle Name:</p> <label for="middleName" aria-hidden="true">Middle Name:</label>
#Html.TextBoxFor(m => m.MiddleName, new { #class = "form-control", id = "middleName" })
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Last Name:</p> <label for="LastName" aria-hidden="true">Last Name:</label>
#Html.TextBoxFor(m => m.LastName, new { id = "LastName", #class = "form-control" })
<span id="LastNameError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Department:</p><label for="Department" aria-hidden="true">Department:</label>
#Html.TextBoxFor(m => m.Department, new { #class = "form-control", id = "Department" })
<span id="DepartmentError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Office Number:</p><label for="OfficeNumber" aria-hidden="true">Office Number:</label>
#Html.TextBoxFor(mbox => mbox.OfficeNumber, new { id = "OfficeNumber", #class = "form-control" })
<span id="OfficeNumberError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Extension:</p> <label aria-hidden="true" for="Extension">Extension:</label>
#Html.TextBoxFor(mbox => mbox.Extension, new { id = "Extension", #class = "form-control" })
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">User Name:</p> <label for="UserName" aria-hidden="true">User Name</label>
#Html.TextBoxFor(m => m.UserName, new { id = "UserName", #class = "form-control" })
<span id="UserNameError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Password:</p><label for="Password" aria-hidden="true">Password:</label>
#Html.PasswordFor(m => m.Password, new { id = "Password", #class = "form-control" })
<span id="PasswordError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Email Address:</p><label for="emailAddress" aria-hidden="true">Email Address:</label>
#Html.TextBoxFor(m => m.EmailAddress, new { id = "emailAddress", #class = "form-control" })
<span id="EmailAddressError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Practitioner</p><label for="Practitioner" aria-hidden="true">Practitioner:</label>
#Html.DropDownListFor(mbox => mbox.PractitionerID, new SelectList(Model.availablePractitioners, "ID", "FullName"), new { id = "Practitioner", #class = "form-control" })
<span id="PractitionerError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Active:</p><label for="Active" aria-hidden="true">Active:</label>
#Html.CheckBoxFor(m => m.Active, new { id = "Active", #class = "form-control", #checked = "checked" })
</div>
</div>
</div>
After posting the question, I realized that wrapping a group of 3 controls inside a col-xs-12 will prevent them from shifting.
<div class="col-xs-12">
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">First Name:</p> <label aria-hidden="true" for="FirstName">First Name:</label>
#Html.TextBoxFor(mbox => mbox.FirstName, new { #class = "form-control", id = "FirstName" })
<span id="FirstNameError" class="error" aria-live="assertive" style="display:block; padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Middle Name:</p> <label for="middleName" aria-hidden="true">Middle Name:</label>
#Html.TextBoxFor(m => m.MiddleName, new { #class = "form-control", id = "middleName" })
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Last Name:</p> <label for="LastName" aria-hidden="true">Last Name:</label>
#Html.TextBoxFor(m => m.LastName, new { id = "LastName", #class = "form-control" })
<span id="LastNameError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
</div>
I want to use label as used "Static Control" label on that page. However, although I use the same Bootstrap version, I cannot aligned my form controls like that (I want the label is right float, data fields is left float -side by side - and there is a ":" sign between them. Howwver, the result is as shown on the image below. Could you please have a look at my code and inform what is wrong?
The code on that page:
<div class="form-group">
<label class="col-md-3 control-label">Static Control</label>
<div class="col-md-9">
<p class="form-control-static"> email#example.com </p>
</div>
</div>
The code I use on my Razor page:
<div class="form-group">
#Html.LabelFor(m => m.Name, new { #class = "col-md-3 control-label" }):
<div class="col-md-9">
#Html.DisplayFor(m => m.Name, new { #class = "form-control-static" })
</div>
</div>
<br />
<div class="form-group">
#Html.LabelFor(m => m.Surname, new { #class = "col-md-3 control-label" }):
<div class="col-md-9">
#Html.DisplayFor(m => m.Surname, new { #class = "form-control-static" })
</div>
</div>
You have two elements which equal 100% width plus the colon, so it pushes the value down a line. You'll need to just code the label instead of using an HtmlHelper to add the colon. Change it to this:
<div class="form-group">
<label class="col-md-3 control-label">#Model.Name:</label>
<div class="col-md-9">
#Html.DisplayFor(m => m.Name, new { #class = "form-control-static" })
</div>
</div>
Here is the final solution fixed the problem. Thanks a lot for all of your helps...
<style>
.col-sm-3 .control-label {
float: right !important;
margin-top: 0 !important;
}
/*Add colon ( : ) to the end of labels */
.col-sm-3 > label:after {
content: " :";
}
</style>
<div class="form-group">
<div class="col-sm-3">
#Html.LabelFor(m => m.Name, new { #class = "control-label" })
</div>
<div class="col-sm-9">
#Html.DisplayFor(m => m.Name)
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-3">
#Html.LabelFor(m => m.Surname, new { #class = "control-label" })
</div>
<div class="col-sm-9">
#Html.DisplayFor(m => m.Surname)
</div>
</div>
<br />
I use bootstrap template on ASP.MVC (but it's minor fact). I have this code on View:
<div class="form-group">
#Html.LabelFor(model => model.udk_number, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.udk_number, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.udk_number, "", new { #class = "text-danger" })
</div>
</div>
But #Html.EditorFor have limited length. How i can increase length of this input?
Similar problem i have and with TextArea:
<div class="form-group">
<label class="col-lg-2 control-label" for="annotation_ru">Аннотация(RU)</label>
<div class="col-lg-10">
<textarea class=form-control id="annotation_ru" name="annotation_ru" rows="3" cols="100"></textarea>
<span class="field-validation-valid text-danger" data-valmsg-for="annotation_ru" data-valmsg-replace="true"></span>
</div>
</div>
I can stretch this area only to the same length as that of the input in example above.
Style your <input> fields using CSS. I usually make them 100% wide so that they are nice and responsive.
input[type=text],
textarea {
width: 100%;
}
In my project I have a form with three inputs, and for all I want to use the input-group and input-group-addon offered by Bootstrap. If I use the following code,
<div class="input-group form-group">
<span style="text-align:left;" class="input-group-addon">... vs Frank</span>
#Html.TextBoxFor(model => model.vsFrank, new { #class = "form-control" })
</div>
<div class="input-group form-group">
<span style="text-align:left;" class="input-group-addon"> ... vs any other guy</span>
#Html.TextBoxFor(model => model.vsAnyOther, new { #class = "form-control" })
</div>
<div class="input-group form-group ">
<span style="text-align:left;" class="input-group-addon">... vs any other monster</span>
#Html.TextBoxFor(model => model.vsAnyMonster, new { #class = "form-control" })
</div>
the result looks like this,
Now, I'd like to have the labels of the last two rows lined up, but the one of the first row shorter. If I add some width to them, as follows,
<div class="input-group form-group">
<span style="width:15ch; text-align:left;" class="input-group-addon">... vs Frank</span>
#Html.TextBoxFor(model => model.vsFrank, new { #class = "form-control" })
</div>
<div class="input-group form-group">
<span style="width:25ch; text-align:left;" class="input-group-addon"> ... vs any other guy</span>
#Html.TextBoxFor(model => model.vsAnyOther, new { #class = "form-control" })
</div>
<div class="input-group form-group ">
<span style="width:25ch; text-align:left;" class="input-group-addon">... vs any other monster</span>
#Html.TextBoxFor(model => model.vsAnyMonster, new { #class = "form-control" })
</div>
the result looks like this:
Now the whole first control is shortened! How can I prevent that without giving all the controls explicit width?
Add a min-width for the input-group.
CSS
.input-group {
min-width: 100%;
}
HTML
<div class="row">
<div class="col-md-3">
<div class="input-group form-group">
<span style="width:15ch; text-align:left;" class="input-group-addon">... vs Frank</span>
<input class="form-control">
</div>
<div class="input-group form-group">
<span style="width:25ch; text-align:left;" class="input-group-addon">... vs any other guy</span>
<input class="form-control">
</div>
<div class="input-group form-group">
<span style="width:25ch; text-align:left;" class="input-group-addon">... vs any other monster</span>
<input class="form-control">
</div>
</div>
</div>
Bootply