This one is strange...I have the following markup for a view using Razor view engine ASP.Net MVC 3 RC
<p>
<div class="editor-label">
#Html.LabelFor(model => model.Client.FirstName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Client.FirstName) #Html.ValidationMessageFor(model => model.Client.FirstName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Client.LastName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Client.LastName) #Html.ValidationMessageFor(model => model.Client.LastName)
</div>
</p>
The problem is that when it renders, the P tag is not surrounding the DIVs! It renders like this:
<p>
</p><div class="editor-label">
<label for="Client.FirstName">First Name</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="The First Name field is required." id="Client_FirstName" name="Client.FirstName" value="My FName" type="text"> <span class="field-validation-valid" data-valmsg-for="Client.FirstName" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Client.LastName">Last Name</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="The Last Name field is required." id="Client_LastName" name="Client.LastName" value="My LName" type="text"> <span class="field-validation-valid" data-valmsg-for="Client.LastName" data-valmsg-replace="true"></span>
</div>
What the heck is going on? Any help is appreciated!
a paragraph cannot contain other block level elements. w3c
also check out this question
Hmmm, it seems like it is just standard browser behavior?
http://blog.programmingsolution.net/html/html-div-tag-inside-html-p-paragraph-tag-does-not-work-correctly/
The P element represents a paragraph. It cannot contain block-level elements e.g. DIV
Related
This question already has answers here:
Label and text box on the same line using css
(4 answers)
Closed 5 years ago.
my label appears on top and below it input box is displayed i want both on the same line.
<fieldset>
<legend style="color:red">Enter Details</legend><br />
<div style="color:red">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field" style="color:InfoBackground">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div><br/>
<div class="editor-field" style="color:red">
#Html.LabelFor(model => model.Country)
</div>
<div class="editor-field" style="color: InfoBackground">
#Html.EditorFor(model => model.Country)
#Html.ValidationMessageFor(model => model.Country)
</div><br/>
<div class="editor-label" style="color:red">
#Html.LabelFor(model => model.Mobile_Number)
</div>
<div class="editor-field" style="color: InfoBackground">
#Html.EditorFor(model => model.Mobile_Number)
#Html.ValidationMessageFor(model => model.Mobile_Number)
</div><br/>
<div align="center"><input type=submit" value="submit" /></div>
</fieldset>
what changes must be done.Please help!!!
As you know that the Div's are by default display:block.So if you want to show you lable or input etc inline then update that div style .Apply the following style to your div to you want to show in line.
style="display:inline-block;"
You have you label wrapped in a div. Div's are default display:block. That means they forces a new line.
Easiest thing to do is to place your #Html.LabelFor and #Html.EditorFor inside the same div and change your css to get the effect you want.
I can't seem to align an input-group-addon correctly in an ASP.NET View.
<form asp-action="Create">
<div class="form-horizontal">
<h4>Category</h4>
<hr />
<div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Hex" class="col-md-2 control-label"></label>
<div class="col-md-10">
<div class="input-group">
<div class="input-group-addon"><i></i></div>
<input asp-for="Hex" class="form-control" value="" />
<span asp-validation-for="Hex" class="text-danger" />
</div>
</div>
</div>
<div class="form-group">
<label asp-for="CompanyId" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="CompanyId" asp-items="Model.Companies" class="form-control">
<option value="">--Please Select--</option>
</select>
</div>
</div>
<div class="form-group">
<label asp-for="Name" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" 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>
</form>
This looks fine in JSFiddle (after adding labels back in). But looks like this when I run the View:
If I swap the input-group-addon and the input the addon floats off to the right.
Could this be something to do with the way a child View is rendered by the _layout view?
Could this be something to do with the way a child View is rendered by the _layout view?
Yup. Especially with renderbody.
Im trying to use Foundation grid in my application but I cannot simply center the fieldset. I try to put in the center of the screen on mobile device and desktops, but it just looks weird. Any idea why?
Please, note that Im new to Foundation and I have no experience with Bootstrap
Code below:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="row">
<div class="large-6 large-centered columns">
<fieldset>
<legend>Logging into Review Platform</legend>
<div class="editor-label">
#Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.UserName)
#Html.ValidationMessageFor(model => model.UserName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Password)
#Html.ValidationMessageFor(model => model.Password)
</div>
<p>
<input type="submit" value="Login" class="button" />
</p>
</fieldset>
</div>
</div>
}
A repeat and edit of my comment on the original question:
Are you wanting full width on mobile and centered on desktop? I do this quite often with something like:
.small-12.large-6.large-centered.columns
or you can do something like
.small-10.small-centered.large-6.columns
You don't need the large-centered because it inherits it from the small-centered class. If you want the larger grid to not be centered, use .large-uncentered
i have written this code in one of the view using ASP.NET MVC. MVC returns me the checkboxes values (only those are checked) and with textboxes it returns me all (0,1,2 etc). how can i co-relate which textbox value belongs to which checkbox (since only i get the checked checkbox values)
For Each item As InternalMailCalendarViewModel In ViewData("InternalMailCalendar")
End Code
<div class="editor-field">
#Html.CheckBox("InternalMailCalendarID", New With {.value = item.ID})
<label for="#item.ID">#item.Days</label>
</div>
<div class="editor-field">
<input type="text" id="RunsPerDay" name="RunsPerDay" placeholder="Runs Per Day" />
#Html.ValidationMessageFor(Function(model) model.RunsPerDay)
</div>
#*
<div class="editor-field">
<input type="checkbox" id="InternalMailCalendarID" name="InternalMailCalendarID" value="#item.ID" />
<label for="#item.ID">#item.Days</label>
</div>
<div class="editor-field">
<input type="text" id="RunsPerDay" name="RunsPerDay" placeholder="Runs Per Day" />
#Html.ValidationMessageFor(Function(model) model.RunsPerDay)
</div>
*#
#Code
Next
End Code
According to my understanding of your code and problem, I suggest you following solution:
Just assign hmtl "Name" property to textbox uniquely and that unique name assign to checkbox as a value. So that you can co-relate textbox with checkbox.
#using (Html.BeginForm("Boxing", "Company",FormMethod.Post))
{
<div class="box">
<div>
<div class="left">
<div class="topLabel">
Id No:</div>
<div class="input_text_65">
#Html.TextBoxFor(m => m.Id)
</div>
<div class="botLabel">
percentt:
</div>
<div>
<input type="text" style="width: 50px" name="percent" />%
</div>
</div>
<div class="lastDetailField">
<div class="topLabel">
D/C:
</div>
<div class="select_110">
#Html.DropDownListFor(m => m.cType, new SelectList((IEnumerable<Model.cType>)ViewData[ViewDataKeys.cTypes]), "----")
</div>
<div class="margin_top_45">
<input id="submit" type="submit" value="submit" />
</div>
</div>
</div>
</div>
}
If I didn't select any option in the dropdownlist (leaving the optionlabel "----" selected) and I press the submit button, the form will not be posted and the focus will be move to the dropdownlist
if I remove the optional Label, like this:
#Html.DropDownListFor(m => m.cType, new SelectList((IEnumerable)ViewData[ViewDataKeys.cTypes]))
then it will work just fine. I'm thinking if I will put an optional label, does that mean I am required to choose an item? I want the form to be submitted even if I leave the dropdownlist with the optionallabel selected.
thanks in advance!
Do you have a required attribute in your model/viewmoden on cType? I think the clientside validation is kicking in, but because you didn't set a validation helper, you're not seeing the message. The form won't submit though if you select the optional label.