in ASP.NET MVC I want to generate this kind of textbox:
http://getbootstrap.com/components/#input-groups-basic
http://screencast.com/t/u1WjajPTDC76
The code I am using is the following:
<div class="form-group">
#Html.LabelFor(model => model.UserPrincipalName, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.UserPrincipalName)
<span class="input-group-addon" id="basic-addon2">#Html.Label(xx.Utils.SettingsHelper.Domain)</span>
#Html.ValidationMessageFor(model => model.UserPrincipalName)
</div>
</div>
However the behavior I get is not the
http://screencast.com/t/DV7VGtVakbSY
You are using <div class="form-group"> but it must be <div class="input-group">
Related
I'm trying to disable autocomplete in two password fields but i couldn't do it. It worked fine with the "autocomplete = off" on textboxes but it didn,t work on password fields.
Thank you in advance.
<div class="form-group" autocomplete="new-password">
#Html.LabelFor(m => m.Password, new { #class = "col-md-5 control-label" })
<div class="col-md-5">
#Html.PasswordFor(m => m.Password, new { #Title = Password, #class = "form-control", #autocomplete = "new-password" })
</div>
</div>
<div class="form-group" autocomplete="new-password">
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "col-md-5 control-label" })
<div class="col-md-5">
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control", #autocomplete = "new-password" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-5">
<input type="submit" class="btn btn-default" value="Confirmer" />
</div>
</div>
You can try this.
Use a tag for the all html elements as a root. And use autocomplete="off" onto that tag.
Then add hidden with autocomplete="false" as a first children element of the form.
If this is not working, feel free to ask for that.
Look for a example : https://gist.github.com/niksumeiko/360164708c3b326bd1c8
I have a form that has a few TextBoxFor and 1 TextAreaFor
Here it is:
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(m => m.FromName, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.FromName, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.FromName)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.FromEmail, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.FromEmail, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.FromEmail)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.ToEmail, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.ToEmail, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.ToEmail)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Message, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextAreaFor(m => m.Message,60, 150, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Message)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-primary" value="Send" />
</div>
</div>
</div>
A picture of what it looks like:
The problem is that I am unable to adjust the width of the TextAreaFor.
I know that Bootstrap grid system is restricting this, but I don't think this should be impossible to simply keep the label where it is, but make the textareafor wider instead of taller.
What I am looking for, is my TextAreaFor to be wider than the regular TextBoxFor. I have tried inserting outrageous numbers into the int rows && int columns parameters of TextAreaFor but the only one that seems to work is int rows.
Any idea on how I can get my TextAreaFor to expand across the page?
Any help is appreciated.
UPDATE:
I have created this Bootply for all of you.
I have figured this out. After Inspecting the Elements, I saw that all of the input, textarea, and select had a max-width of 280px.
So all I had to do was give the textarea a class and set its max-width to something that I prefer.
I am working on an ASP.NET, Bootstrap 3 website and have a problem with changing the size of the dropdownlist.
I can change it manually in the CSS to match the size of the other input boxes but I don't want to edit it manually every time I need to change it.
Is there a way to always keep the width the same between the dropdownlist and the other input boxes?
Here is what it is doing:
iPhone 6 vs
iPhone 5: Problem. The problem is that the dropdownlist doesn't get resized within the div.
And here is an example of my code:
<section class="features">
#using (Html.BeginForm("Create", "UsersAdmin", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<h4>Create a new account</h4>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<!--ALL THESE INPUT BOXES ADJUST AUTOMATICALLY-->
<div class="form-group">
#Html.LabelFor(m => m.Address, new { #class = "col-md-5 control-label" })
<div class="col-md-7">
#Html.TextBoxFor(m => m.Address, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.City, new { #class = "col-md-5 control-label" })
<div class="col-md-7">
#Html.TextBoxFor(m => m.City, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.City, "", new { #class = "text-danger" })
</div>
</div>
<!--HERE IS THE DROPDOWLIST THAT NEEDS TO BE ADJUSTED DYNAMICALLY-->
<div class="form-group">
#Html.LabelFor(m => m.State, new { #class = "col-md-5 control-label" })
<div class="col-md-7 dropdownlist">
#Html.DropDownListFor(m => m.State, Steel_Tech.STATE.States, "--Select a State--", new { #class = "dropdownlist" })
#Html.ValidationMessageFor(m => m.State, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Zip, new { #class = "col-md-5 control-label" })
<div class="col-md-7">
#Html.TextBoxFor(m => m.Zip, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Zip, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default" value="Create" />
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
I am coding an MVC 5 view, and I want to place a button next to a select list. My current code places the button under the select list.
Here is my code:
<div class="form-group">
#Html.LabelFor(model => model.userName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(m => m.userName, Model.userNames, htmlAttributes: new { #class = "form-control" })
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Select" class="btn btn-default" />
</div>
</div>
</div>
Here is an image showing the button placement:
Even if I have the following code, the button is under the select list:
<p>
#Html.LabelFor(model => model.userName, htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(m => m.userName, Model.userNames, htmlAttributes: new { #class = "form-control" }) <input type="submit" value="Select" class="btn btn-default" />
</p>
Don't put the submit button in a div.
A div is display: block by default.
<div class="input-group">
#Html.DropDownListFor(m => m.userName, Model.userNames, htmlAttributes: new { #class = "form-control" })
<span class="input-group-btn">
<input type="submit" value="Select" class="input-group-addon btn btn-default" />
</span>
</div>
By using the classes input-group on the div, input-group-btn on the span and input-group-addon on the select button , you can place dropdownlist and button on the same line.
Refer to this article :
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-input-groups.php
I having MVC project with User entity which have one to many relationship with address,
I use code first and by scaffolding generate the view . in the create operation I see in the left side of the screen the fields from userid until working at .what I need is very simple,in the right side of the screen create table on the create view which is currently empty with one column that user can add to address,how should I do that?
Im very new to MVC and didn't find any documentation on how to add control like table in the right side of the create vied.
I try something like this without success
the table is in the bottom of the screen
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>User</h4>
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
#Html.LabelFor(model => model.UserId, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.UserId)
#Html.ValidationMessageFor(model => model.UserId)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.WorkingAt, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.WorkingAt)
#Html.ValidationMessageFor(model => model.WorkingAt)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
//This is the table which I want to be in the right side of the screen
<table class="table">
<tr>
<th>
#Html.EditorFor(model => model.Adress)
</th>
</table>
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Try this:
<table class="table col-md-offset-11 col-md-10">
<tr>
<th>
#Html.EditorFor(model => model.Address)
</th>
</table>