The standard ASP.NET MVC template in Visual Studio 2013 generates a page Register.cshtml that defines the UI for registering new user into the system. I extended it to add a checkbox for "I accept the terms." Here is the code snippet:
<div class="form-group">
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
#Html.CheckBoxFor(m => m.AcceptTerms, new { #class = "form-control" })
#Html.Label("I accept", new { #class = "control-label" })
</div>
</div>
The idea is that a chexkbox gets displayed below the password editbox. The text must get displayed on the right side of the checkbox.
Here is the partial image of how the output looks:
As you can see, the checkbox is getting center-aligned and "I accept" is flowing to the next line.
How can I keep the checkbox and the label together and also ensure that the checkbox is left-aligned with the editbox above it? Regards.
Do this...
<label>
I accept
#Html.CheckBoxFor(m => m.AcceptTerms)
</label>
Try this ... hope this will help
<div class="checkbox">
#Html.CheckBoxFor(model => model.IsMobileView, new { htmlAttributes = new { #class = "form-control pull-left" } })
</div>
It seems that 'label' or/and input type="checkbox" have the display type block.
To fast check try add style="display: inline-block" to both Label and CheckBoxFor. If I'm right, then you can correct your .css-files.
Related
I want to change value color to red on my page if the value is negative.I get my values from my DB so perhaps I need to use jQuery or some if else statement in my cshtml.If you know some answers I would apriciate it, thx in advance! Here is my details page..
#model ParentDbModel
#{
PageNavigation nav = ViewBag.PageNavigation as PageNavigation;
}
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(model => model.PAYINPAYOUT, new { #class = "control-label col-md-2" })
<div class="col-md-2">
<b>
#Html.DisplayFor(model => model.PAYINPAYOUTCONVERTED)
</b>
#Html.ValidationMessageFor(model => model.PAYINPAYOUT)
</div>
</div>
</div>
so, if this (PAYINPAYOUTCONVERTED) has negative value it has to be painted in red!
You can try to use conditional operator ?:
<b style="color:#(Model.PAYINPAYOUTCONVERTED<0?"red":"")">
#Html.DisplayFor(model => model.PAYINPAYOUTCONVERTED)
</b>
So I have a form with a couple inputs and their labels in an ASP.NET view, but the labels that are multiple words, get broken into multiple lines in full scale (if it's one very long word it doesn't so the length shouldn't be a problem), and I'd like to have it as one line.
Here's an example:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
<div class="container">
<div class="row ">
<div class="col-lg-4 col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.MyAttr,"MyLabel", htmlAttributes: new { #class = "control-label col-md-1 label-operation" })
<div class="col-md-12">
#Html.EditorFor(model => model.MyAttr, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.MyAttr, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.MyAttr2, "My Label Two", htmlAttributes: new { #class = "control-label col-md-1 label-operation" })
<div class="col-md-12">
#Html.EditorFor(model => model.MyAttr2, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.MyAttr2, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
</div>
}
(The label-operation CSS class is my own,so far it only has the font-size set in it)
.label-operation {
font-size: 12px;
}
UPDATE
As suggested, I have tried different col-md values before, the next happens:
I have seen your code Maybe this is because you are using the "col-md-1" class in code that makes the width responsive in tabs and other devices but not on a desktop browser.
#Html.LabelFor(model => model.MyAttr2, "My Label Two", htmlAttributes: new { #class = "control-label label-operation" })
So what I ended up doing is get rid of the "col-md-1" entirely and set the left padding in my custom ".label-operation" CSS class to 15px. Now the labels look as intended in both full scale and in responsive cases.
The class .form-group functions in a way the same as a row would. As the form field them selfs are already quite small the class .col-md-1 made sure the label is only 1/12th of that rows width.
As on why the first element doens't display every small, it's because it contains no breaking spaces, so it remains on one line.
To fix this you could change the class .col-md-1 to .col-auto, which would make the column af wide as the content.
I have a DDL which fetch data assigned users from DB. I want to give ability to type it in or select from DDL.
here is my view code
<div class="form-group col-md-6 ui-front">
<label class="control-label">Assigned To</label>
#Html.DropDownListFor(model => model.OpsMonUser, new SelectList(Model.OpsMonUser), new { #id =
"OpsMonUserDDL", #class = "form-control" })
</div>
Any idea how should I proceed further?
Very strange issue is occurring and has to do with my browsers capability to remember passwords. So I have a few login details and have rememberd them upon login. I move to the area of the site where I manage users. There is a field for their initials, and after that is a password field. If I double click in the initials input field I get a list of a all usernames that I login to the site with. If I select one it will autocomplete the below password field with the relevant stored password.
My Question is how can I disable this once logged in? I set the form and both inputs autocomplete attribute to off, still no success. I know it has to do with the fact that the browser (FireFox) see's a password field and "Assumes" the prior field is the username field. This is a extremely huge assumption. If I change the input type to text the autocompleteing does not work. So its all based on the fact that its a password field and the prior text input must be the username. The changing of the fields ids don't change anything
Below Is the form and fields:
<div class="row">
#using (Html.BeginForm("UserCreate", "Account", FormMethod.Post, new { id = "UserCreateForm", autocomplete = "off" }))
{
<div class="col-md-6">
#Html.LabelFor(model => model.Initial, htmlAttributes: new { #class = "col-md-4" })
<div class="col-md-8 popovers" data-container="body" data-trigger="hover"
data-placement="top" data-content="Required">
#Html.EditorFor(model => model.Initial, new { htmlAttributes = new { #class = "form-control", autocomplete = "off" } })
#Html.ValidationMessageFor(model => model.Initial, "", new { #class = "text-danger" })
</div>
</div>
<!--/span-->
<div class="col-md-6">
#Html.LabelFor(model => model.Password, htmlAttributes: new { #class = "col-md-4" })
<div class="col-md-8 popovers" data-container="body" data-trigger="hover"
data-placement="top" data-content="Required">
#Html.EditorFor(model => model.Password, new { htmlAttributes = new { #class = "form-control", autocomplete = "off" } })
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
</div>
<!--/span-->
}
</div>
Thanx for any help!
Sorry I found a workaround. Still not ideal but does the job
<input type="text" style="display:none">
<input type="password" style="display:none">
Pretty much fools the browser.
I'm working on an ASP.Net MVC 5 project uisng razor views.
I have multiple textarea fields in a form using html helpers.
Everything seems to be working ok however the labels for textareas don't show the "*" to denote a required field like the other fields do. Is there a special reason for this? How do I get it to do that?
My model looks like this (only relevant info shown):
[Required, DisplayName("Agreed Action")]
public string AgreedActionText { get; set; }
My View looks like this:
<div class="form-group">
#Html.LabelFor(model => model.AgreedActionText, new { #class = "col-xs-12 col-sm-2 col-md-2 control-label" })
<div class="col-xs-12 col-sm-10 col-md-10">
#Html.TextAreaFor(model => model.AgreedActionText, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.AgreedActionText)
</div>
</div>
Working example:
Model:
[Required, DisplayName("Action Title")]
public string ActionShort { get; set; }
View:
<div class="form-group">
#Html.LabelFor(m => m.ActionShort, new { #class = "col-xs-12 col-sm-4 col-md-4 control-label" })
<div class="col-xs-12 col-sm-8 col-md-8">
#Html.TextBoxFor(m => m.ActionShort, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.ActionShort)
</div>
</div>
This works:
<label class="col-xs-12 col-sm-2 col-md-2 control-label" for="AgreedActionText">Agreed Action Text<span style="color:red"> *</span></label>
But it's not really the solution I was after, I want the helper to automatically know it's a required field and add the asterix like it does with text boxes and other input fields.
You can create your own html helper for that.
This may help :
How can I override the #Html.LabelFor template?
Html inside label using Html helper
<style type="text/css">
.requiredlabel :after
{
content: "*";
font-weight: bold;
color: red;
}
</style>
#Html.Label("Title", new { #id = "lbltitleName", #class = "control-label requiredlabel " })
I've had a quick look at the ASP.NET website and noticed the following snipper of code in the validation tutorial:
[Required(ErrorMessage = "Price is required")]
So in your instance:
[Required(ErrorMessage = "*"), DisplayName("Agreed Action")]
Now, I understand that the above will not show until the user tries to submit the form with missing content however the implementation is handled entirely by the MVC Framework.
I hope this leads you closer to what you are after.