c# - MVC y EditorPara ancho

html actionlink

Question

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

He establecido algunos parámetros:

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

Sin embargo, parece que no puedo establecer el ancho del cuadro de texto que se representa.

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

Lo intenté:

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

Pero no hay alegría ...

Answer 1

¿Qué hay de malo en usar CSS para diseñar el ancho de tu control?

Answer 2

Como se mencionó anteriormente, el lugar al que desea ir está en site.css

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

Puede establecer cualquier valor predeterminado que desee allí o eliminar el bloque para obtener el valor predeterminado de Bootstrap del 100%. Personalmente, agregué las siguientes opciones para poder realizar fácilmente algunos cambios según 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%;
}

Answer 3

Con BootStrap 3

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

Answer 4

En lugar de EditorFor, use TextBoxFor:

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

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 lo expresa Paul Litwin:

Sí, Microsoft por alguna razón está configurando el ancho máximo de todos los controles de entrada, selección y área de texto en 280 píxeles. No estoy seguro de la motivación detrás de esto, pero hasta que lo cambies o lo anules asignando los controles de formulario a alguna otra clase de CSS, tus controles nunca podrán ser más anchos 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 eres pragmático, cambias el ancho máximo a, por ejemplo, 600px

Answer 6

En su archivo CSS para Site.css, el ancho máximo predeterminado es de 280 px si tiene VS generó todo por usted cuando creó el Proyecto MVC por primera vez. No importa qué tan grande sea el ancho que configure su @html.editorfor con un ID determinado, está limitado por la siguiente sintaxis.

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

Puedes cambiarlo aquí dándole un nuevo ancho máximo o máximo.

Answer 7

Es posible que deba agregar "! Important" al atributo css para asegurarse de que anula el valor predeterminado para TextBoxFor, por ejemplo, ancho: 50px! Important;

Answer 8

La respuesta anterior es Sí y No. Necesitamos usar la herramienta de desarrollo para verificar qué estilos se utilizan y modificarlos, pueden tener ancho máximo, ancho; Entonces crea tu 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 el resultado de la imagen adjunta.

introduzca la descripción de la imagen aquí

Answer 9

Patrik Lindström es correcto con el ancho máximo.

Pude evitar esto estableciendo 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

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

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

Answer 11

Si necesita un ancho personalizado fuera de una regla CSS normal y está utilizando plantillas de editor, puede hacerlo

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

Luego, en su plantilla de editor para String agregue esto a su plantilla

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