Pomster Pomster - 1 day ago 4
CSS Question

How to align the textbox's for a editor for in mvc razor?

I have razor EditorFor<> creating some textbox's for me but the alignment is terrible and i cant come right will straightening it up.

enter image description here

How would i align all the textboxs to start the same distance from the text?

View:

<div style="float: left; width: 50%;">

@Html.LabelFor(m => m.Date)
@Html.EditorFor(m => m.Date)
<br/>
@Html.LabelFor(m => m.QuoteNumber)
@Html.EditorFor(m => m.QuoteNumber)
<br/>
@Html.LabelFor(m => m.ClaimNumber)
@Html.EditorFor(m => m.ClaimNumber)
<br/>
@Html.LabelFor(m => m.MotorBodyRepairer)
@Html.EditorFor(m => m.MotorBodyRepairer)
<br/>

</div>
<div style="float: right; width: 50%;">

@Html.LabelFor(m => m.VehicleRegistration)
@Html.EditorFor(m => m.VehicleRegistration)
<br/>
@Html.LabelFor(m => m.VehicleMake)
@Html.EditorFor(m => m.VehicleMake)
<br/>
@Html.LabelFor(m => m.VehicleRange)
@Html.EditorFor(m => m.VehicleRange)
<br/>
@Html.LabelFor(m => m.VehicleModel)
@Html.EditorFor(m => m.VehicleModel)
<br/>

</div>


Model:

namespace SpendDirect.WebUI.Models.ViewModels
{
public class APNewQuoteViewModel
{
[Display(Name = "Date")]
public DateTime Date { get; set; }

[Display(Name = "Quote Number")]
public string QuoteNumber { get; set; }

[Display(Name = "Claim Number")]
public string ClaimNumber { get; set; }

[Display(Name = "Motor Body Repairer")]
public string MotorBodyRepairer { get; set; }

[Display(Name = "Vehicle Registration")]
public string VehicleRegistration { get; set; }

[Display(Name = "Vehicle Make")]
public string VehicleMake { get; set; }

[Display(Name = "Vehicle Range")]
public string VehicleRange { get; set; }

[Display(Name = "Vehicle year Model")]
public string VehicleModel { get; set; }

}
}

Answer

Simply apply CSS

label
{
width:200px;
float:left;
text-align:left
}

input[type=text]
{
width:200px;
float:left;
}

In case, if you want to apply for few label, just add a class like field and write css selector like below and most recommended

label.field
{
//style goes
}

Then

@Html.LabelFor(m => m.Date, new {@class="field"})

To apply HTMLAttributes for EditorFor you may need to send it as ViewData and use it in your Editor Template .

In MVC 5.1, you can use htmlAttributes parameter for EditorFor. Read the release notes

Comments