2011-02-02 5 views
3

이것은 비참하게 신비합니다. textarea 필드가있는 양식이 있습니다. 나는 데코레이터와 그 모든 것들을 제거했다. 그리고 나는 setAttribs 행과 cols (젠드 프레임 워크에서 개발 중)와 함께. 텍스트 영역은 계속해서 매우 넓어서 컨테이너에서 쏟아져 나와 뷰포트 외부에 있습니다. 필요한 경우 스크린 샷을 추가 할 수 있습니다.텍스트 영역에 열이 설정되지 않습니다

<form id="edit-pending-email" enctype="application/x-www-form-urlencoded" method="post" action="[path]/email/edit-pending-email/"> 

<label for="salutation" class="optional">Salutation</label> 

<input type="text" name="salutation" id="salutation" value="Yo" /> <p><label for="content" class="optional">Body of Email</label> 

<textarea name="content" id="content" cols="40" rows="30"> blah blah ... text goes here ... 

</textarea></p> 

<input type="submit" name="save" id="save" value="Save" /> 

<input type="submit" name="cancel" id="cancel" value="Cancel" /></form> 
다음

기이은 다음과 같습니다

는 여기에 기본 코드입니다.

  1. 행 값을 변경하면 행이 변경됩니다. cols 값을 변경하면 아무 것도 변경되지 않습니다. 하지만 행이 바뀌므로 구문이 정확하다는 것을 알기 때문에 어쨌든 다른 개발자와 비교해 보았습니다. 그들은 어떤 일이 벌어지고 있는지 모릅니다. 내가 코드를 복사하는 간단한 HTML 페이지에 붙여 넣을 경우
  2. 는, 텍스트 영역이 제대로

나는 CSS에서 보았다 (이 문제가되지해야하지만, 내가 확인) 크기 및 COLS에 대한 참조가 없습니다 유일한 너비 참조는 다른 요소에 대한 것입니다. 간단히 말해서, cols 설정이 그대로 작동하는 이유는 없습니다.

아직 그렇습니다.

+0

오 클레이드. 코드는 붙여 넣지 않았습니다. Let ' –

+1

크롬을 사용하는 경우 텍스트 영역을 마우스 오른쪽 버튼으로 클릭하고'요소 검사 '를 클릭하면 필드에 대해 계산 된 모든 스타일 특성을 분석 할 수 있습니다. – earldouglas

+2

Firefox의 @James 또는 Firebug. @Skip 지금까지 게시 한 모든 내용이 CSS를 가리 킵니다. – Phil

답변

1

나는 마침내 이것을 추적했다. 그것은 실제로 스타일 시트에있었습니다. 즉, 스타일 시트에 없었지만 그래야합니다.

내가 이해하지 못하는 이유로 텍스트 영역 (다른 요소에도 적용됨)은 어떤 열이 표시되는지에 관계없이 최대로 확장하려고합니다. 이것은 나에게 의미가 없지만 그곳에 있습니다.

이 문제를 해결하는 방법은 최대 너비를 설정하는 것입니다. 내가 그렇게하자마자, 요소는 적절한 폭으로 행동하고 크기가 정해졌습니다. 참고 : 너비가 그것을하지 않습니다. 최대 너비 만 작동합니다.

이런.

4

설정 후 width: auto, cols 속성은 나를 위해 작동합니다 (적어도 크롬에서는 다른 브라우저를 아직 테스트하지 않았습니다).

textarea { 
    width: auto; 
} 
+0

Chrome은 기본적으로 Webkit이므로 (현재는) Safari에서도 작동합니다. – August

관련 문제