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
Related
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;
}
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 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 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 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>