In the html below I'm having trouble getting the label and it's corresponding radio button to appear on the same line, what's the correct way to do this?
thanks
<div class="display-field">
#foreach (var value in Enum.GetValues(typeof(items.titles)))
{
<div class="display-field">
#Html.Label(value.ToString())
#Html.RadioButtonFor(m => m.title, value)
</div>
}
</div>
Try using LabelFor instead of Label
#Html.LabelFor
For more details, here is a tutorial for labels
http://www.tutorialsteacher.com/mvc/htmlhelper-label-labelfor
Set the label's CSS style to inline-block.
#Html.Label(value.ToString(), new { style = "display: inline-block" })
Without seeing the CSS for your page, the label element that is produced from your call to #Html.Label() is likely set to block level (display: block). Block level elements stack on top of each other and inline/inline-block level elements don't.
Please keep in mind that you should set the display value in your CSS and not by preference in the htmlAttributes value of your helper. You would do this by putting this (or something better targeted in your CSS file):
label { display: inline-block; }
Related
I'm creating a simple ASP.net MVC form using bootstrap. My form looks like:
#using(Html.BeginForm()){
<div class="row">
<div class="col-md-4">#Html.TextBox("City", "", new { placeholder = "City" })</div>
<div class="col-md-4">#Html.TextBox("State", "", new { placeholder = "State", maxlength = "2" })</div>
<div class="col-md-4">#Html.TextBox("Zip", "", new { placeholder = "Zip Code" })</div>
</div>
}
Although I'm using appropriate classes for columns and textboxes should be inline, they are appearing in different rows. To my understanding, as long as the column widths are within a limit of 12 columns, inline elements should appear in the same row. Why is there a line break between these elements?
N.B: If I remove divs for individual columns and put all textboxes in a single div, they appear in the same row correctly.
To my understanding, as long as the column widths are within a limit
of 12 columns, inline elements should appear in the same row.
Cut off for col-md-x is 970px. It means if the browser size is less than 970px, they will be rendered as individual row. You can read here.
If you always want them to appear them in a single row, you want to use col-xs-x, or mix classes like this -
<div class="row">
<div class="col-sm-4 col-xs-12"></div>
<div class="col-sm-4 col-xs-12"></div>
<div class="col-sm-4 col-xs-12"></div>
</div>
If you want your textboxes inline, they should be put inside a single div tag. but if you want to put it in different divs, you can try to remove "col-md-4" in your divs and use css instead, like this:
.row {
display: flex;
}
Also, add some extra "padding" or "margin" property for spacing between those textboxes.
If there is anything wrong about my answer, please feel free to correct it. Thanks!
In my ViewModel there is a property that needs a 2 line label but when I place a <br /> in the DisplayName attribute the HTML code is printed to the page instead of being interpreted as a line break. Is there a way to get a DisplayName to have a line break in it?
View:
<tr>
<td>
#Html.LabelFor(m => m.GrossGallons)
</td>
<td>
</td>
</tr>
ViewModel:
[DisplayName("Gross Gallons <br /> (Max: 6,000)")]
public decimal GrossGallons { get; set; }
Output trying to get:
Gross Gallons
(Max: 6,000)
There is a simple way of doing this - use \n instead of <br />, and use CSS to make it work.
Model:
[DisplayName("Gross Gallons\n(Max: 6,000)")]
public decimal GrossGallons { get; set; }
CSS:
label { white-space: pre-wrap; }
I would recommend making the CSS selector as specific as possible, so as not to catch other labels (in case you're using labels by hand elsewhere, where your source code may contain whitespace). For example, in bootstrap I would've applied this to label.control-label.
You could also attach a more specific style to that label only, and style only that class.
#Html.LabelFor(m => m.GrossGallons, new { #class = "multiline-label" })
I can think of a few options.
1) You could use #Html.Raw(). You can replace the string I have entered with a reference to a string.
#Html.Raw("Gross Gallons <br /> (Max: 6,000)");
1a) If you need to set it in the DisplayName attribute, then you might try using Html.Raw() but accessing the value through reflection. (Note: I haven't tried this, so don't know if it is possible)
2) You could use css styling to force the line to wrap where you want it to.
3) You could create a custom extension method or custom attribute to do this for you.
you can use #Html.Raw(), I think this is the most simple way.
It's not pretty, but you could use EditorTemplates and create a _layout.cshtml that all your Templates use. Then use this to pull/display the DisplayName:
<div class="form-group">
<label for="#ViewData.ModelMetadata.PropertyName">
#Html.Raw(ViewData.ModelMetadata.GetDisplayName())
</label>
#RenderBody()
#Html.ValidationMessageFor(x => x)
</div>
The serious drawback to this is you would have to create EditorTemplates for each of your types like this sample string.cshtml template:
#model string
#{
Layout = "_Layout.cshtml";
}
#Html.TextBoxFor(x => x, new { #class="form-control" })
A little off-topic but going this route allows me to encapsulate wrapping HTML around my form elements, so my forms in the views end up really simple like this:
<fieldset>
#Html.EditorFor(x => x.Email)
#Html.EditorFor(x => x.Address1)
#Html.EditorFor(x => x.Address2)
#Html.EditorFor(x => x.City)
</fieldset>
If use LabelFor(), another "possible" solution is to implement your own using the original source as a guide.
Replace
tag.SetInnerText(resolvedLabelText);
with
tag.InnerHtml = resolvedLabelText;
This is one is a strange one, so I'll start out with some MVC code (this is inside a td tag):
#Html.LabelFor(m => pile.NumCalsReturned)
#Html.DropDownListFor(m => pile.NumCalsReturned, new SelectList(cals))
<br />
#if (pile.NTCal)
{
#Html.LabelFor(m => pile.NumNTCalsReturned)
#Html.DropDownListFor(m => pile.NumNTCalsReturned, new SelectList(cals))
}
I'm using the following style:
label {
width: 140px;
display: inline-block;
}
Now, I was pretty surprised when the output showed the second dropdown to be closer to it's label than the first.
I tried expanding the width to 200px (plenty of whitespace between) but still the last label was further to the left. It was the same in both IE10 and Chrome. Inspecting the source code in IE10 I found the following weird "Empty text node"
So, I found the following fix:
#Html.LabelFor(m => pile.NumNTCalsReturned)
<span></span> #* without this span, there is a whitespace missing *#
#Html.DropDownListFor(m => pile.NumNTCalsReturned, new SelectList(cals))
Now, I would really like some explanation as to what is going on here?
I am working with mvc4 and displaying data from my model in to cshtml views.
When setting data in to the markup, I adding it in to div tags.
Is there a way in mvc that if the model property is not set, dont display the div?
Sample of my markup
<div class="myclass"> #Model.Text </div>
You can test for a value being set like so:
#if (!string.IsNullOrEmpty(Model.Text))
{
<div class="myclass"> #Model.Text </div>
}
Update: If you want to incorporate the logic for whether or not to render an element based on its value, you could create a Custom HTML Helper method.
How about wrapping it in a null check
#{
if (#Model.Text != null)
{
<div class="myclass"> #Model.Text </div>
}
}
What is the simplest way to set the size of the generated field?
Using CSS:
<div class="foo">
<%= Html.EditorFor(x => x.Foo) %>
</div>
and in your CSS file:
.foo input {
width: 200px;
}
You could also implement a custom DataAnnotationsModelMetadataProvider which would allow you to attach any attributes you like to the generated input field such as class, maxlength, size, ...
Another option still: rather than appending the class to the wrapper around your input, you can apply HTML properties to the input itself (doesn't work for "EditorFor" though):
#Html.TextBoxFor(x => x.Foo, new { #class = "bar" })
Further discussion: http://michaelware.net/post/2010/01/31/Custom-Attributes-When-Using-HtmlTextBoxFor.aspx