MVC и EditorFor width

Question

Можно ли задать ширину редактора для управления в моем представлении?

Я установил несколько параметров:

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

Однако, я не могу показаться, чтобы установить ширину текстового поля, который визуализируется.

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

Это можно сделать как-то?

Я пробовал:

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

Но нет радости ...

Answer 1

Вместо EditorFor используйте TextBoxFor:

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

Answer 2

Что случилось с использованием CSS, чтобы стиль вашей ширины управления?

Answer 3

Вы можете добавить в атрибут CSS, чтобы убедиться, что он перекрывает значение по умолчанию для TextBoxFor, например, «важно!» ширина: 50px! important;

Answer 4

Если вам нужна пользовательская ширина за пределами нормального правила CSS, и вы используете редактор шаблоны вы можете сделать

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

Затем в шаблоне редактора для строк добавьте в ваш шаблон

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

Answer 5

В mvc 5 есть настройка в site.css, которая устанавливает max-width = 200 для всех текстовых областей. Это смутило меня, пока я не нашел этот блог-блог. http://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap как Пол Litwin выразился:

Да, Microsoft по какой-либо причине, задающего максимальную ширину всех ввода, выбора и управления 280 текстовой области пикселей. Не уверен в мотивации , но до тех пор, пока вы не измените это значение или не переопределите это значение , назначив элементы управления формой другому классу CSS, ваши элементы управления никогда не смогут быть более широкими, чем 280 пикселей.

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

Таким образом, вы, если вы прагматичный изменить максимальную ширину, чтобы, например, 600px

Answer 6

С Bootstrap 3

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

Answer 7

Над ответом Да и Нет. Мы должны использовать разработки инструмент для проверки того, какие стили используются и модифицируют их, они могут иметь максимальную ширину, ширину; Затем создайте собственный! Важный css, чтобы применить его, мой случай:

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

см. Прилагается изображение результат.

enter image description here

Answer 8

Заменить <%=Html.EditorFor(m => m.Name, new {width=50)%> для этого

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

Answer 9

Patrik Линдстрем правильно с Max-шириной.

я смог обойти эту проблему, установив максимальную ширину и ширину

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

Answer 10

Как упоминалось ранее, место, куда вы хотите идти в site.css

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

Вы можете установите любое значение по умолчанию, которое вы хотите там, или удалите блок, чтобы получить значение Bootstrap 100%. Лично я добавил следующие варианты, чтобы я мог легко внести некоторые изменения на основании данного поля управления:

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

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

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

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