Pomster Pomster - 1 year ago 97
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?


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

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

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

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



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 Source

Simply apply CSS



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

//style goes


@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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download