내가 도우미 메서드 내에서 내 html.EditorFor 상자의 너비를 조정할 수 없습니다

Question

VS2013, MVC5, 면도기, VB는

나는, 그래서 아마이 배울 수있는 나의 기회가 아직 CSS 파일과 그 유창하게 구사하고있어 ,하지만 나는 또한 html.EditorFor 명령에 뭔가를 추가하여 표시되는 상자를 더 넓게 만들 수 있어야한다고 생각했다. 나는 아래로 .rows을 추가

@Html.EditorFor(Function(model) model.Body, New With { .htmlAttributes = New With { .class = "form-control" } }) 

(내가 가지고있는 "데이터 형식 (DataType.MultilineText)"클래스 속성 '바디'장식) :

을

이 비계에서 내 원래 코드는

@Html.EditorFor(Function(model) model.Body, New With {.htmlAttributes = New With {.class = "form-control", .rows = "20"}}) 

나를 쉽게 더 많은 행을 줄 수있게 도와주었습니다. 그러나 .cols를 추가하면 작동하지 않는 것 : 사실

@Html.EditorFor(Function(model) model.Body, New With {.htmlAttributes = New With {.class = "form-control", .rows = "20", .cols = "80"}}) 

, 내가 = "10", 내가보기에 변화를 볼 .cols을 설정 한 경우에도. 브라우저에서 소스를 확인했는데 cols 속성이 있습니다. 내가 html.TextBoxFor 주위를 재생하고 상자의 너비를 작게 조정할 수있는 것으로 나타났습니다하지만 최대 너비를 넘을 수있는 놀이의 최대 너비가 있습니다. .TextBoxFor는 원래만큼 멋지게 표시되지 않기 때문에 사용하지 않았습니다.

MVC 템플릿은 부트 스트랩 CSS 파일을 광범위하게 사용하기 때문에 조금만 주저했지만 조금만 대답하면 변경 사항을 안전하게 작성하거나 모범 사례에 따라 안내 할 수 있습니다. .

나는 또한 내가 html.EditorFor 명령에 로컬 스타일의 변화를 만들 수없는 이유의 질문이 있습니다. 원칙이 표시된 요소에 가까울수록 CSS의 우선 순위가 높을 것이라고 생각했습니다.

Chris Pratt 님의 답변 : 그래서이 발판으로 만든 표준 면도기 코드입니다. 내 견해의 한 요소 만 포함했습니다. 요소 내부에서 클래스를 변경하면 어떻게 영향을 주는지 보았습니다. 그러나 Label 요소와 .EditorFor 요소를 변경하는 결과를 얻었습니다. 더하기, .EditorFor 요소가 더 넓어지는 것을 결코 얻지 못했습니다.

@Using (Html.BeginForm()) 
@Html.AntiForgeryToken() 
@Html.Hidden("ChannelItemID", ViewData("ChannelItemID")) 

@<div class="form-horizontal"> 
    <hr /> 

    <div class="form-group"> 
    @Html.LabelFor(Function(model) model.UserPost.Title, htmlAttributes:=New With {.class = "control-label col-md-2"}) 
    <div class="col-md-10"> 
     @Html.EditorFor(Function(model) model.UserPost.Title, New With {.htmlAttributes = New With {.class = "form-control"}}) 
     @Html.ValidationMessageFor(Function(model) model.UserPost.Title, "", New With {.class = "text-danger"}) 
    </div> 
    </div> 

부트 스트랩을 올바르게 사용하면서 100 % 너비를 변경해야한다고 제안했는지 궁금합니다.

Answer 1

두 가지. 첫째, 명시적인 너비가 설정되지 않은 경우 cols은 텍스트 영역의 너비에만 영향을줍니다. 기본 Site.css 파일은 참으로 입력, 텍스트 영역에 최대 폭을 설정하고 선택 :

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

그래서 상관없이 추가 얼마나 많은 열, 텍스트 영역이 280px 이상으로 확장하지 않습니다. 당신이 부트 스트랩을 사용하려고하는 경우

둘째, 다음이 당신이 어쨌든 폭을 제어하는 ​​방법이 아니다. 입력 내용에 실제로는 100 % 너비로 확장되는 클래스 form-control이 주어져야합니다. 이 제한은 부트 스트랩이 제공하는 반응 형 그리드 클래스에서이를 래핑하여 제한합니다. 예를 들면 다음과 같습니다.

<div class="col-md-4"> 
    <textarea class="form-control"></textarea> 
</div>