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
Related
I'm trying to put the glyphicon-question-sign on the same line of the textbox. The only working solution I found is using a table but it shrinks the textbox length. I could stretch it back with CSS but I'm concerned about page responsiveness. What I am after is to have all the textbox of the same width and for some of them a clarification icon on the right.
How would you solve this?
Thanks.
<div class="form-group" id="vatNumberDiv">
#Html.LabelFor(m => m.vatNumber, new {#class = "col-md-2 control-label"})
<div class="col-md-10">
#Html.TextBoxFor(m => m.vatNumber, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.vatNumber, "", new {#class = "text-danger"})
</div>
</div>
<div class="form-group" id="destCodeDiv">
#Html.LabelFor(m => m.destCode, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<table>
<tr>
<td>
#Html.TextBoxFor(m => m.destCode, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.destCode, "", new { #class = "text-danger" })
</td>
<td> </td>
<td>
<span class="glyphicon glyphicon-question-sign" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="Description text..." style="font-size: 1.2em"></span>
</td>
</tr>
</table>
</div>
There are couple of methods. Glyphicons are nothing but text/font and so you can make use of form-control-static using two methods.
In keeping with the grid layout you can shorten your fields by 1 and make room for a col-**-1
Or... There is also nothing preventing you from setting an overriding width of your inputs, it's just that a form-control defaults to 100% of the col. You can override the form-control with some CSS and set both the form-control and form-control-static to inline-block to keep things on the same line as below:
Keep in mind things get wonky with Bootstrap as you shift to smaller screen-sizes but at least the display is consistent
View the snippet below in full screen as necessary to see the effect.
#CustomForm .width-override {
width: 50% !important;
}
#CustomForm .form-control,
#CustomForm .width-override+p.form-control-static {
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-xs-2 control-label">Email</label>
<div class="col-xs-6">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
<div class="col-xs-1">
<p class="form-control-static">
<span class="glyphicon glyphicon-question-sign "></span>
</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-xs-2 control-label">Password</label>
<div class="col-xs-6">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
<div class="col-xs-1">
<p class="form-control-static">
<span class="glyphicon glyphicon-question-sign "></span>
</p>
</div>
</div>
</div>
<br />
<br />
<br />
<div id="CustomForm" class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control width-override" id="inputEmail3" placeholder="Email">
<p class="form-control-static">
<span class="glyphicon glyphicon-question-sign "></span>
</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control width-override" id="inputPassword3" placeholder="Password">
<p class="form-control-static">
<span class="glyphicon glyphicon-question-sign "></span>
</p>
</div>
</div>
</div>
</div>
</div>
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
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 really don't know what I'm doing wrong. I want my textboxes with same size of my buttons below. I already tried change a lot in the cshtml but without success.
Below my cshtml file:
#model SomeModel.Models.LoginViewModel
<div class="row">
<div class="col-md-8 col-sm-12 col-xs-12">
<section id="loginForm">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
#Html.LabelFor(m => m.UserName, new { #class = "col-md-2 control-label" })
<div class="col-md-12">
#Html.TextBoxFor(m => m.UserName, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.UserName)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "col-md-2 control-label" })
<div class="col-md-12">
#Html.PasswordFor(m => m.Password, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Password)
</div>
</div>
<div class="form-group">
<div class="col-sm-12 col-xs-12">
<button type="submit" class="btn btn-success btn-block">Entrar</button>
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-sm-12 col-xs-12 visible-sm visible-xs">
<button type="submit" class="btn btn-primary btn-block">Ainda Não Tenho Conta</button>
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-sm-12 col-xs-12 visible-sm visible-xs">
<button type="submit" class="btn btn-info btn-block">Esqueci Meu Usuário Ou Senha</button>
</div>
</div>
<p>
#Html.ActionLink("Register", "Register") if you don't have a local account.
</p>
}
</section>
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
What am I doing wrong?
The default MVC5 template has a css rule in Site.css:
input, select, textarea { max-width: 280px; }
I usually remove this rule.
It causes problems with Bootstrap v3 input group where the input box does not extend to its container's width.
I am using bootstrap for my web application, and I have problem with validationmessagefor puting message state in correct position. Now I have use this example from this link, with this code:
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
Now code that I use:
<h4 class="form-signin-heading">Please sign in</h4>
<div class="control-group">
<div class="controls">
#Html.TextBoxFor(u => u.Username, new {placeholder="Username", #class="form-control username", id="inputError"})
<span class="help-inner">#Html.ValidationMessageFor(u => u.Username)</span>
</div>
<div class="controls">
#Html.PasswordFor(u => u.Password, new {placeholder="Password", #class="form-control password"})
#Html.ValidationMessageFor(u=> u.Password)
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
My code do this (also in fiddle: http://jsfiddle.net/4h5E5/1/):
But my disire is to put validate message in this position (like example in link):
Please check this JS Fiddle Link
HTML Code:
<!DOCTYPE html>
<body>
<div class="container">
<form class="form-signin form-horizontal" role="form">
<h4 class="form-signin-heading">Please sign in</h4>
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<input type="username" class="form-control username" placeholder="Username" required="autofocus" />
</div>
<div class="col-xs-7 col-sm-5"> <span class="help-inline pull-left">Please correct the error</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<input type="password" class="form-control password" placeholder="Password" />
</div>
<div class="col-xs-7 col-sm-5"> <span class="help-inline pull-left">Please correct the error</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</div>
</div>
</form>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript==================================================- ->
<!-- Placed at the end of the document so the pages load faster -->
</body>
I hope this is what you want to achieve.
If you have any other issue or if not solved, then please add a comment below.
Regards D.
Have you tried this? (untested)
<div class="controls">
<input type="text" id="inputError" class="pull-left">
<span class="help-inline pull-left">Please correct the error</span>
</div>
ps.would be great if you make a fiddle.
Use style = "display:inline" for EditorFor and ValidationMessageFor both, as below:
<div class="form-group">
#Html.LabelFor(model => model.UserName, htmlAttributes: new { #class = "control-label col-md-2"})
<div class="col-md-9">
#Html.EditorFor(model => model.UserName, new { htmlAttributes = new { #class = "form-control", style = "display:inline" } })
#Html.ValidationMessageFor(model => model.UserName, "*", new { #class = "text-danger", style = "display:inline" })
</div>
</div>