Wie richten Sie die textbox ist für einen editor für das in mvc razor?

Habe ich razor "EditorFor" <> die Erstellung mancher textbox ist für mich aber die Ausrichtung ist schrecklich und ich kann nicht kommen, rechts Richt es.

Wie würde ich ausrichten, alle textboxs starten den gleichen Abstand vom text?

Anzeigen:

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

Modell:

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

    }
}

InformationsquelleAutor Pomster | 2014-03-20

1

Einfach anzuwenden CSS
```
label
{
width:200px;
float:left;
text-align:left
}

input[type=text]
{
width:200px;
float:left;
}
```
Im Fall, wenn Sie sich bewerben möchten für ein paar label, fügen Sie einfach eine Klasse wie field und schreiben von css-Selektor wie unten und am meisten empfohlenen
```
label.field
{
//style goes
}
```
Dann
```
@Html.LabelFor(m => m.Date, new {@class="field"})
```
Anwenden HTMLAttributes für EditorFor müssen Sie möglicherweise senden Sie es als ViewData und verwenden Sie es in Ihrem Editor-Template .

In MVC 5.1 verwenden, können Sie htmlAttributes parameter für "EditorFor". Lesen Sie die release notes

InformationsquelleAutor Murali Murugesan
1

Können Sie Folgendes versuchen:
```
Dictionary<string, object> labelHtmlProperties = new Dictionary<string, object>();
labelHtmlProperties.Add("style", "width: 100px;"); //set the width as big you need...
```
In jedem @Html.LabelFor fügen Sie den HTML-Eigenschaften:
```
@Html.LabelFor(m => m.Date, labelHtmlProperties )
@Html.EditorFor(m => m.Date)
<br/>
@Html.LabelFor(m => m.QuoteNumber, labelHtmlProperties )
@Html.EditorFor(m => m.QuoteNumber)
<br/>
...
```
Durch die Verwendung der gleichen Dictionary mit dem HTML-Eigenschaften, stellen Sie sicher, dass alle Ihre Etiketten sind gerendert mit den gleichen Eigenschaften. Alternativ können Sie eine Klasse hinzufügen, um die Etiketten, und fügen Sie die Breite in der CSS. Oder noch besser, legen Sie die Stile für die Etiketten, die im Kontext der container divs.
- Die Erhöhung der Breite nicht alles tun?
- es kommt auf die Formatvorlage, die Sie bereits gesetzt haben, auf den Etiketten. Mit wie viel hast du erhöhen Sie die Breite?
- Bitte verwenden Sie die css-Klasse für eine bessere Kontrolle. Sie sind mit inline-Stile, die schwierig ist für die Wartung
- Wie bereits in meiner Antwort, das ist eine der alternativen. Aber ich würde sagen, dieser Ansatz ist ziemlich einfach zu pflegen, da Sie brauchen, um die Breite zu ändern in einzige Ort (z.B. das Wörterbuch).
InformationsquelleAutor Andrei V

Können Sie verwenden, wie diese:

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

InformationsquelleAutor Ravindra

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.