<div class="labelled-text-field">
#Html.LabelFor(x => x.Email)
#Html.TextBoxFor(x => x.Email)
#Html.ValidationMessageFor(x => x.Email)
</div>
When using right click -> paste label gets overlapped with the pasted email:
When typing or using Ctrl+v (paste) work well:
I dont know if using a razor oncopy event is the way to fix this:
#Html.TextBoxFor(x => x.Email,
new {
#class = "input_box",
id = "txtDays",
onpaste=""
}
)
Try the placeholder attribute. It will clear the watermark when you paste the text.
<div class="labelled-text-field">
#Html.LabelFor(x => x.Email)
#Html.TextBoxFor(x => x.Email, new {placeholder="Your Email" })
#Html.ValidationMessageFor(x => x.Email)
</div>
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>
I'm working with a Kendo Grid that shows a modal when editing or adding a row. I'm seeking to modify the modal and add another dropdown list to it. The one thing I'm totally confused about at the moment is that the cshtml for the modal refers to the ViewBag to provide the source data for the dropdownlists, but I can't find anywhere in the entire solution where any code (anywhere) populates the ViewBag with the properties the modal uses.
Before I started modifying, the cshtml had:
#Html.Kendo().DropDownListFor(model => model.Status).BindTo(ViewBag.Statuses).DataTextField("Name").DataValueField("Value").OptionLabel("Please Select")
^^^^^^^^^^^^^^^^
The debugger says this is valid; the ViewBag does contain a .Statuses and it is loaded with data, but I've no idea how this thing came to be in the ViewBag. The only place the controller refers to the viewbag is in setting the .Title
Here's cshtml for the modal:
#model ModalModel
#Html.HiddenFor(model => model.Id)
<!-- this is the new one -->
<div class="editor-group">
<div class="editor-label">
#Html.LabelFor(model => model.ProjectId)
</div>
<div class="editor-field">
#Html.Kendo().DropDownListFor(model => model.ProjectId).BindTo(ViewBag.ProjectId_Data).OptionLabel("Please Select")
#Html.ValidationMessageFor(model => model.ProjectId)
</div>
</div>
<!-- existing one. Needs DataTextField and DataValueField because model.Statuses is not an IEnumerable<SelectListItem>, its a custom collection of c# enum name/value representation -->
<div class="editor-group">
<div class="editor-field">
#Html.Kendo().DropDownListFor(model => model.Status).BindTo(ViewBag.Statuses).DataTextField("Name").DataValueField("Value").OptionLabel("Please Select")
#Html.ValidationMessageFor(model => model.Status)
</div>
</div>
Here's a snip of the cshtml for the main grid and some periphery stuff:
#model GridModel
<h3>#ViewBag.Title</h3>
#{
var projectListItems = Model.Projects.Select(e => new SelectListItem { Value = e.Id.ToString(), Text = e.Name });
var activityListItems = Model.Activities.Select(e => new SelectListItem { Value = e.Id.ToString(), Text = e.PrivateName });
}
#(Html.Kendo().Grid<UsageModel>()
.Name("MainGrid")
.Columns(cfg =>
{
cfg.Bound(e => e.DateUsed).ClientTemplate("#= kendo.toString(DateUsed, \"d\") #");
cfg.ForeignKey(e => e.ProjectId, projectListItems, "Value", "Text").Title("Project name").Width(150);
cfg.ForeignKey(e => e.ActivityId, activityListItems, "Value", "Text").Title("Activity name").Width(150);
cfg.ForeignKey(e => e.Status, Model.Statuses, "Value", "Name");
cfg.Command(cmd => { cmd.Edit(); cmd.Destroy().HtmlAttributes(new { style = "visibility:hidden" }); }).Width(80);
})
.Pageable()
...
The 4 items in the ViewBag are:
ProjectId_Data (IEnumerable<SelectListItem>)
ActivityId_Data (IEnumerable<SelectListItem>)
Status_Data (IEnumerable<SelectListItem>)
Statuses (IEnumerable<a custom internal type used for expanding enums into name/value strings>)
Am I correct in assuming that Kendo added these things to the viewbag as part of the data binding process on the main grid? The rendering of the grid to page occurs before the processing of the modal..
Please give (IEnumerable) inside BindTo() for casting and try
#using Kendo.Mvc.UI
#using System.Collections
#Html.Kendo().DropDownListFor(model => model.Status).BindTo((IEnumerable)ViewBag.Statuses).DataTextField("Name").DataValueField("Value").OptionLabel("Please Select")
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"})
I'm working on the simple webpage where user will be able to change some data.
I'm using #Html.EditorFor for changing that data. But I have some problems.
Here You can see my HTML Code:
<div class="form-group">
#Html.LabelFor(model => model.DeviceUser, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DeviceUser, new { #Value = ViewBag.id})
#Html.ValidationMessageFor(model => model.DeviceUser)
</div>
</div>
As You can see I'm trying to replace DeviceUser with new Id which is passed from Controler using ViewBag.
But for unknow reason for me this textbox always holds old value.
Can anyone suggest me how to fix it?
Try changing this
#Html.EditorFor(model => model.DeviceUser, new { #Value = ViewBag.id})
to
#Html.TextBoxFor(model => model.DeviceUser, new { #Value = ViewBag.id})
I have a form with two text boxes. What I would like is when the user clicks in the text boxes the default values disappears. I am using razor so not sure how to add the onfocus event I think I need.
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { #class = "newsletterform" }))
{
#Html.TextBoxFor(m => m.Name, new { #Value = "Name"})
#Html.TextBoxFor(m => m.Email, new { #Value = "Email"})
<input type="submit" class="newsletterGo" value="Go" />
}
You can user the placeholder attribute. An example of it is the search box at the top of this page
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { #class = "newsletterform" }))
{
#Html.TextBoxFor(m => m.Name, new { placeholder = "Default Name"})
#Html.TextBoxFor(m => m.Email, new { placeholder = "person#example.com"})
<input type="submit" class="newsletterGo" value="Go" />
}
Also, you don't need to specify the #Value attribute. The HTML helpers take care of setting the input values for you.