CODEWITHSUNDEEP
cssasp.net-mvcasp.net-mvc-4razor
Pomster
Pomster

Reputation: 15197

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; }

    }
}

Upvotes: 1

Views: 18794

Answers (3)

Ravindra
Ravindra

Reputation: 91

You can use like this:

@Html.LabelFor(model => model.TITLEID, htmlAttributes: new { @class = "control-label col-md-2" , @style = "float: left;text-align: left;" })

Upvotes: 4

Murali Murugesan
Murali Murugesan

Reputation: 22619

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

Upvotes: 1

Andrei V
Andrei V

Reputation: 7476

You can try the following:

Dictionary<string, object> labelHtmlProperties = new Dictionary<string, object>();
labelHtmlProperties.Add("style", "width: 100px;"); //set the width as big you need...

In each @Html.LabelFor add the HTML properties:

@Html.LabelFor(m => m.Date, labelHtmlProperties )
@Html.EditorFor(m => m.Date)
<br/>
@Html.LabelFor(m => m.QuoteNumber, labelHtmlProperties )
@Html.EditorFor(m => m.QuoteNumber)
<br/>
...

By using the same Dictionary containing the HTML properties, you ensure that all your labels are rendered using the same properties. Alternatively, you could add a class to the labels and add the width in the CSS. Or even better, set the styles for the labels in the context of your container divs.

Upvotes: 1

Related Questions