MVC và EditorFor width

Question

Tôi có thể đặt chiều rộng của điều khiển EditorFor trên Chế độ xem của mình không?

tôi đã thiết lập một vài thông số:

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

Tuy nhiên, tôi dường như không thể thiết lập độ rộng của hộp văn bản đó được trả lại.

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

Điều này có thể thực hiện được không?

tôi đã cố gắng:

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

Nhưng không có niềm vui ...

Answer 1

Thay vì EditorFor, sử dụng TextBoxFor:

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

Answer 2

Có gì sai với việc sử dụng CSS để định dạng độ rộng kiểm soát của bạn?

Answer 3

Bạn có thể cần phải thêm vào các thuộc tính css để đảm bảo rằng nó sẽ ghi đè mặc định cho TextBoxFor ví dụ "quan trọng!" chiều rộng: 50px!

Answer 4

Nếu bạn cần một độ rộng tùy chỉnh bên ngoài của một quy tắc CSS bình thường và bạn đang sử dụng biên tập Templates bạn có thể làm

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

Sau đó, trong mẫu soạn thảo của bạn cho String thêm video này vào template của bạn

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

Answer 5

Trong mvc 5, thiết lập trong site.css đặt độ rộng tối đa = 200 cho tất cả các vùng văn bản. Điều đó làm tôi bối rối cho đến khi tôi tìm thấy blogpost này. http://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap như Paul Litwin đặt nó:

Vâng, Microsoft là đối với một số lý do thiết lập chiều rộng tối đa của tất cả các đầu vào, lựa chọn, và điều khiển textarea đến 280 pixel. Không chắc chắn động cơ đằng sau điều này, nhưng cho đến khi bạn thay đổi điều này hoặc ghi đè điều này bằng cách gán điều khiển biểu mẫu cho một số lớp CSS khác, các điều khiển của bạn sẽ không bao giờ có thể rộng hơn 280px.

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

Vì vậy, bạn nếu bạn là một người thực dụng bạn thay đổi max-width tới eg 600px

Answer 6

Với bootstrap 3

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

Answer 7

Trên câu trả lời Có và Không, chúng tôi cần phải sử dụng phát triển công cụ để kiểm tra những kiểu được sử dụng và sửa đổi chúng, chúng có thể có chiều rộng tối đa, chiều rộng; Sau đó tạo css quan trọng để áp dụng nó, trường hợp của tôi:

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

xem kết quả hình ảnh đính kèm.

enter image description here

Answer 8

Thay <%=Html.EditorFor(m => m.Name, new {width=50)%> cho điều này

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

Answer 9

Patrik Lindström là đúng với Max-width.

tôi đã có thể làm được việc này bằng cách thiết lập max-width và chiều rộng

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

Answer 10

Như đã đề cập, nơi bạn muốn đi là trong site.css

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

Bạn có thể đặt bất kỳ giá trị mặc định nào bạn muốn ở đó hoặc xóa khối để có được mặc định Bootstrap là 100%. Cá nhân, tôi đã thêm các tùy chọn sau để tôi có thể dễ dàng thực hiện một số thay đổi dựa trên điều khiển và trường được đề cập:

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

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

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

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