I am using MVC 4, jQuery and Bootstrap plugin but I want to off the suggestion words, so I put autocomplte="off" but it is not working. Please suggestion me
My razor code is
#Html.TextBoxFor(m => m.Customer_Username, new { id = "logusrname",#autocomplete="off", #class = "form-control", #role = "form", #placeholder = "Username" })
Related
Hopefully this is an easy one...
I am having an issue with Bootstrap 5 floating labels not working when I create HTML elements using Razor syntax.
If I use plain HTML they work as expected. Using razor the labels are appearing in the state you'd expect if the text box has focus (top left of input)
<div class="form-floating mb-3">
#Html.EditorFor(model => model.Recipient, new { htmlAttributes = new { #class = "form-control", #onchange = "javascript: Changed( this, 'recipient-name' );" } })
#Html.ValidationMessageFor(model => model.Recipient, "", new { #class = "text-danger" })
#Html.LabelFor(model => model.Recipient)
</div>
Here is an image of the above on load -
Code output in UI
Has anyone had this issue, know a way to get around it or spot what I am doing wrong? (I need the input tag to be populated from the model as the form can be used to create a new request or update and existing request)
Thanks
Do you want something like below?
<div class="form-floating">
<input asp-for="Recipient" class="form-control" />
<label asp-for="Recipient"></label>
<span asp-validation-for="Recipient" class="text-danger"></span>
</div>
Thanks but I figured out what I was doing wrong. The issue was simple...
ISSUE - There was no placeholder tag which this animation relies on.
RESOLUTION - Add #placeholder = "Recipient Name"
To provide a bit more info the text input looks different when in focus/not focused. This was the issue.
It should have looked like this when not focused - Not Focused
But it was looking like this - Focused
The code that fixed the issue is
<div class="form-floating mb-3">
#Html.EditorFor(model => model.Recipient, new { htmlAttributes = new { #class = "form-control", #onchange = "javascript: Changed( this, 'recipient-name' );", #placeholder = "Recipient Name" } })
#Html.ValidationMessageFor(model => model.Recipient, "", new { #class = "text-danger" })
#Html.LabelFor(model => model.Recipient)
</div>
Hi Im new to MVC5 and I just want to ask how can I add the attribute for my Editor so i can add phone mask in it
Heres the code
#Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { #class = "form-control" } })
and heres the attribute that i want to add
data-mask="(999) 999-9999"
I tried it in a simple input and it works
<input type="text" class="form-control" data-mask="(999) 999-9999" placeholder="Phone">
Thanks in advance
new { htmlAttributes = new { #class = "form-control", data_mask = "(999) 999-9999" } }
(underscore will be converted to hyphen by razor engine)
great answer by user3559349
I have one text area field called Description in my view. I wish to increase the size of that field.
My code
<div class="col-sm-3">
<div class="form-group">
<span style="color: #f00">*</span>
#Html.LabelFor(model => model.Description, new { #class = "control-label" })
#Html.TextAreaFor(model => model.Description, new { #class = "required", style = " rows=10, columns=40" })
#Html.ValidationMessageFor(model => model.Description)
</div>
</div>
My TextArea
I want to bring as like which is mention in the below image
So i gave Rows and columns in textarea field. It increase the size of the text area. But when i shrink the page to phone size means all fields got shrink . But this textarea field is not shrink up to the page size. This is the issue
I kept validation for my fields. I want to show that validation in Red color. I'm using Model validation.
Try This:
#Html.TextAreaFor(model => model.Description, 10,40, htmlAttributes: new {style="width: 100%; max-width: 100%;" })
While this is already answered, Someone out there might still need this.
#Html.TextAreaFor(model => model.comments,
new { #cols = "100", #rows = "8", #style="width:100%;"})
Rows and Cols does not come under style tag. Its an independent attribute for textarea. You can write it as below.
#Html.TextAreaFor(model => model.Description, new { #class = "required", #cols = 40, #rows = 10})
Remove textArea element from site.css file. In site.css textarea max-width set as 280px;
Do like
input
,select
/*,textarea*/
{
max-width: 280px;
}
#Html.TextAreaFor(m => m.Description, 10, 40, new { #class = "form-control required", style="max-width:75% !important;" })
#Html.TextAreaFor(model => model.Description, new { #class = "form-control", #cols = 10, #rows = 10,#style="resize:both;" })
#Html.TextAreaFor(model => model.Description,10,40, new { #class = "required"})
This question already has an answer here:
MVC Datatype Currency trigger numeric keypad
(1 answer)
Closed 6 years ago.
Trying to add a bootstrap class to an input generated by EditorFor but not working...
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
without helper working fine:
<input class ="form-control" name="Name" type="Text" value="#Model.Nome" />
Which version of MVC are you using?
Support for htmlAttributes was added to MVC 5.1. http://www.asp.net/mvc/overview/releases/mvc51-release-notes
You might need to assign the class inside the editor template and in the custom template as shown below:
#Html.EditorFor(x => x.Summary)
<div>
#Html.TextBoxForModel(x => x.Summary, new { #class = "form-control" })
</div>
For more information you might have a look at Html.EditorFor and htmlAttributes. Hope this helps...
Im beginner in the ASP.NET MVC. I am add drop down menu , but the CSS does not work correctly. How can I fix it? This is my code:
#Html.DropDownListFor(m => Model.Fields[i], new SelectList(Model.attrs[i].atributeDetails, "AtributeDetailId", "AtDetailVal", int.Parse(Model.Fields[i])), " ", new { Class = "form-control", disabled = "disabled",style = "width:575px;height:25px;font-size:small;" })
If you're saying that the styles associated with the 'form-control' class aren't working then it could be because the 'Class' word needs to be lowercase. I normally use #class="my-class". So maybe try the following:
#Html.DropDownListFor(m => Model.Fields[i], new SelectList(Model.attrs[i].atributeDetails, "AtributeDetailId", "AtDetailVal", int.Parse(Model.Fields[i])), " ", new { #class = "form-control", disabled = "disabled",style = "width:575px;height:25px;font-size:small;" })