MVC e EditorDa larghezza

Question

Posso impostare la larghezza di un controllo EditorFor sulla mia vista?

ho impostato alcuni parametri:

 [Required, DisplayName("Payee Name"), StringLength(50)] 
    public string Name { get; set; } 

Comunque, io non riesco a impostare la larghezza della casella di testo che viene reso.

<table width="300" border="0" cellpadding="3" cellspacing="0"> 
    <tr> 
     <td> 
      <%=Html.LabelFor(m => m.Name)%> 
     </td> 
     <td> 
      <%=Html.EditorFor(m => m.Name)%> 
     </td> 
    </tr> 

Questo può essere fatto in qualche modo?

ho provato:

<%=Html.EditorFor(m => m.Name, new {width=50)%> 

Ma nessuna gioia ...

Answer 1

Invece di EditorFor, utilizzare TextBoxFor:

<%=Html.TextBoxFor(m => m.Name, new {style = "width:50px"})%> 

Answer 2

Cosa c'è di sbagliato con l'utilizzo di CSS per lo stile la larghezza di controllo?

Answer 3

Potrebbe essere necessario aggiungere l'attributo di CSS per garantire che essa sostituisce il default per TextBoxFor esempio "importante!" larghezza: 50px! importante;

Answer 4

Se avete bisogno di una larghezza personalizzata al di fuori di una regola CSS normale e si utilizza Editor modelli si può fare

<%=Html.EditorFor(m => m.Name, new { Width = 50})%> 

Poi, nel tuo editor di modelli per String aggiungere questo al modello

@Html.TextBox(s => { 
... 
    if (ViewBag.Width != null) 
    { 
     s.Width = ViewBag.Width; 
    } 
}).Bind(Model).GetHtml() 

Answer 5

In mvc 5 è presente l'impostazione in site.css che imposta il valore max-width = 200 per tutte le aree di testo. Questo mi ha confuso fino a quando ho trovato questo blogpost. http://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap come Paul Litwin lo mette:

Sì, Microsoft è un po 'l'impostazione della larghezza massima di tutti i di input, selezionare e controlli textarea a 280 pixel ragione. Non sei sicuro della motivazione dello , ma finché non lo cambi o lo sostituisci con assegnando i controlli del modulo ad un'altra classe CSS, i tuoi controlli non potranno mai essere più larghi di 280px.

/* Set width on the form input elements since they're 100% wide by default */ 
input, 
select, 
textarea { 
    max-width: 280px; 
} 

modo che se siete un pragmatico si cambia il max-width, ad esempio, 600px

Answer 6

Con BootStrap 3

@Html.EditorFor(model => model.PriceIndicatorDesc, new { htmlAttributes = new { @class = "form-control", @style = "width:280px" } }) 

Answer 7

Sopra risposta Sì e No. Abbiamo bisogno di usare lo sviluppo strumento per verificare quali stili sono stati utilizzati e modificarli, possono avere larghezza massima, larghezza; Quindi creare proprio importante css per applicarlo, il mio caso:!

<style> 
    textarea, 
    input[type='text'], 
    .form-group, 
    .form-group-lg, 
    .form-horizontal, 
    .form-control,  
    .text-box, 
    .single-line, 
    .multi-line{ 
     width: 800px !important; 
     max-width: 1000px !important; 
    } 
    .multi-line{ 
     height: 300px !important; 
    } 
    .form-horizontal{ 
     position:absolute; 
     padding-left:15%; 
    } 
</style> 

vedi allegato risultato dell'immagine.

enter image description here

Answer 8

Sostituire <%=Html.EditorFor(m => m.Name, new {width=50)%> per questo

<%=Html.EditorFor(m => m.Name,new { htmlAttributes = new { style = "width: 50px" }, } 

Answer 9

Patrik Lindström è corretto con la massima larghezza.

sono stato in grado di ottenere intorno a questo impostando il max-width e larghezza

@Html.EditorFor(model => model.Source, new { htmlAttributes = new { @class = "form-control", @placeholder = "Source", @style = "width: 900px;max-width: 900px;" } }) 

Answer 10

Come accennato in precedenza, il luogo si vuole andare è in site.css

input, 
select, 
textarea { 
    max-width: 280px; 
} 

Puoi imposta qualsiasi valore predefinito desiderato o rimuovi il blocco per ottenere il valore predefinito Bootstrap del 100%. Personalmente, ho aggiunto le seguenti opzioni per apportare facilmente alcune modifiche in base al controllo e al campo in questione:

.form-control-25 { 
    max-width: 25%; 
} 

.form-control-50 { 
    max-width: 50%; 
} 

.form-control-75 { 
    max-width: 75%; 
} 

.form-control-100 { 
    max-width: 100%; 
}