MVC y editor Para el ancho

Question

¿Puedo establecer el ancho de un control EditorFor en mi vista?

que han establecido unos parámetros:

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

Sin embargo, me parece que no puede establecer el ancho del cuadro de texto que consigue prestados.

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

¿Se puede hacer esto de alguna manera?

me trataron:

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

Pero no hay alegría ...

Answer 1

En lugar de EditorFor, utilice TextBoxFor:

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

Answer 2

¿Qué pasa con el uso de CSS para el estilo de su ancho de control?

Answer 3

Es posible que tenga que añadir al atributo css para asegurar que se anula el valor predeterminado para TextBoxFor por ejemplo, "importante!" ancho: 50px! importante;

Answer 4

Si necesita un ancho personalizado fuera de una regla CSS normal y que está utilizando el Editor de plantillas que puede hacer

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

Luego, en el editor de plantillas de Cadena añadir esto a su plantilla

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

Answer 5

En mvc 5 hay una configuración en site.css que establece el ancho máximo = 200 para todas las áreas de texto. Eso me confundió hasta que encontré este blogpost. http://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap como Paul Litwin pone:

Sí, Microsoft es por algún ajuste de la anchura máxima de todos los de entrada, seleccionar y controles de área de texto a 280 píxeles razón. No estoy seguro de la motivación detrás de esto, pero hasta que cambie esto o sobrescriba esto por asignando los controles de formulario a alguna otra clase CSS, sus controles nunca podrán ser más amplios que 280px.

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

Así que si usted es un pragmático que cambiar el ancho máximo de 600px por ejemplo

Answer 6

Con BootStrap 3

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

Answer 7

encima respuesta Sí y No. Necesitamos usar desarrollar herramienta para verificar qué estilos usar y modificarlos, pueden tener ancho máximo, ancho; A continuación, cree su propio css importante para aplicarlo, mi 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> 

ver imagen adjunta resultado.

enter image description here

Answer 8

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

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

Answer 9

Patrik Lindström es correcta con el Max-anchura.

pude evitar esto ajustando el ancho máximo y el ancho

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

Answer 10

Como se ha mencionado anteriormente, el lugar al que desea ir es en site.css

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

Puede establezca cualquier valor predeterminado que desee allí o elimine el bloque para obtener el valor predeterminado de Bootstrap del 100%. En lo personal, he añadido las siguientes opciones, así que podría fácilmente hacer algunos cambios basados ​​en el control y el campo en cuestión:

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

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

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

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