Can someone please explain to me why my textbox is not streching?? I've spent a ridiculous amount of time on this and I'm obviously missing something.
I've looked at various answers on SO and other website but to no avail. I've tried changing attributes in using style, but again no luck!
I found an article on SO but can't find it now, but I do have the sample that was provided: resize example and the article stated that you could simply set the width:100% in style, but even looking at this example is driving me nuts as both lines are stretching 100%, yet only one of them has it width set to 100%
#using System
#model MyCompany.Models.ApplicationFormModel
#{
ViewBag.Title = "Application Form";
}
#*<h2>ApplicationForm</h2>*#
<div class="row">
#*<div class="col-sm-6">*#
<div class="well bs-component">
#using (Html.BeginForm("ApplicationForm", "Registration",
FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<fieldset>
<legend>Application Form</legend>
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Name,
new { #class = "control-label col-sm-2" })
<div class="col-sm-10">
#Html.TextBoxFor(model => model.Name,
new { #class = "form-control", style = "width:100%" })
#Html.ValidationMessageFor(model => model.Name, "",
new { #class = "text-danger" })
</div>
</div>
<div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
</fieldset>
}
</div>
#*</div>*#
</div>
Look in Site.css
There probably you will find next lines
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
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 use IDE to generate a view and controller from model automatically in MVC, however, when I try to change the size of textAreafor, I found the width has limitation , I cant make it more widely... here is my code, hope for some help
#model VeganCommunityApplication.Models.Article
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Article</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
.
.
.
<div class="form-group">
#Html.LabelFor(model => model.Content, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.Content,20,70,new {#style="width:400px;height:400px" })
#Html.ValidationMessageFor(model => model.Content, "", new { #class = "text-danger" })
</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>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Change your textarea to this:
#Html.TextAreaFor(model => model.Content,20,70,new { #class = "col-md-12" })
This will make it 100% as wide as it's parent element.
For reference: Bootstrap grid system
You can change it like this:
#Html.TextAreaFor(model => model.Content, new { #class = "whatever-class", #cols = 40, #rows = 40 })
.whatever-class{
width:400px;
height:400px
}
I have a standard login page on mvc 4 which is functioning fine but my html knowledge is very weak and I need a quick answer to tidying up the form after I installed twitter bootstrap, the username and password labels are stuck on the same line within the form, can someone please recommend a quick fix to tidying up my code, Thanks
#model MvcApplication2.Models.login_details
#{
ViewBag.Title = "Log in";
}
<br /><br /><br />
<h2>#ViewBag.Title.</h2>
<div class="row">
<div class="col-md-8">
<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, "", new { #class = "text-danger" })
<div class="col-md-10">
#Html.LabelFor(m => m.username, new { #class = "col-md-2 control-label"})
<div class="col-md-10">
#Html.TextBoxFor(m => m.username, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.username, "", new { #class = "text-danger"})
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.password, new { #class = "col-md-2 control-label"})
<div class="col-md-10">
#Html.PasswordFor(m => m.password, new { #class = "form-control"})
#Html.ValidationMessageFor(m => m.password, "", new { #class = "text-danger"})
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Log in" class="btn btn-default" />
</div>
</div>
}
</section>
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Easy :)
Just change the LabelFor's class from col-md-2 to col-md-3 then add another item, text-left.
So your labels should look like:
#Html.LabelFor(m => m.Email, new { #class = "col-md-3 control-label text-left" })
#Html.LabelFor(m => m.Password, new { #class = "col-md-3 control-label text-left" })
Then goto Site.css (~/Content/site.css) and add the following to the bottom:
.form-horizontal .control-label.text-left{
text-align: left;
}
I would recomend though that you learn HTML/JS/Bootstrap as if your making websites ever professionally you almost always will have to be competent with basic HTML/JS/Bootstrap(sometimes)
I am trying to create a horizontal form in razor but I cannot seem to apply the css. Everything else has the proper CSS but when i try to add the class to the BeginForm or even the normal it does not work.
Here is my view:
#using (Html.BeginForm(Html.BeginForm("Default", "Employee", null, FormMethod.Post, new { #class = "form-horizontal" })))
{
<h2>Employee Search</h2>
<fieldset>
<div class="form-group">
#Html.Label("Company: ", new { #class = "control-label" })
</div>
<div>
#Html.DropDownList("cono", (List<SelectListItem>)ViewBag.CompanyList, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.Label("First Name: ", new { #class = "control-label" })
</div>
<div>
#Html.TextBox("firstName", Session["firstname"], new { #class = "form-control" })
</div>
<div class="form-group">
#Html.Label("Last Name: ", new { #class = "control-label" })
</div>
<div>
#Html.TextBox("lastName", Session["lastname"], new { #class = "form-control" })
</div>
<div class="form-group">
#Html.Label("Branch: ", new { #class = "control-label" })
</div>
<div>
#Html.DropDownList("branch", (List<SelectListItem>)ViewBag.BranchList, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.Label("Sales Rep: ", new { #class = "control-label" })
#Html.TextBox("salesRep", Session["salesrep"], new { #class = "form-control" })
</div>
<div class="form-group">
#Html.Label("Status Type: ", new { #class = "control-label" })
#Html.DropDownList("statusType", (List<SelectListItem>)ViewBag.StatusTypeList, new { #class = "form-control" })
</div>
</fieldset>
<input type="submit" class="btn btn-default" name="DefaultPost" value="Search" />
<input type="button" value="Clear" class="btn btn-default" onclick="location.href='#Url.Action("Default", "Employee")' " />
}
Here is what it looks like:
Remove the div wrapping the labels
Give the labels a column class col-sm-3
Add a column class col-sm-9 to the div wrapping the inputs
Make sure the form-group div wraps the both the label and the div wrapping the input.
Razor syntax
<div class="form-group">
#Html.Label("Company: ", new { #class = "col-sm-3 control-label" })
<div class="col-sm-9">
#Html.DropDownList("cono", (List<SelectListItem>)ViewBag.CompanyList, new { #class = "form-control" })
</div>
</div>
Plain HTML format...
<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" id="inputEmail3" placeholder="Email">
</div>
</div>