요소 UI에서자가 크기 텍스트 주어를위한 높이를 설정하는 방법

UI 요소에서 textarea input 자동 크기로 설정 한 후 텍스트 상자의 기본 높이는 33 이며 디자인을 준수하지 않습니다.

기본 스타일

브라우저의 요소를查检하고 찾으십시오

높이는 상자에있는 텍스트 textarea height 와 min-height 에 의해 제어됩니다. 상자의 텍스트 위치는 padding 에 의해 제어됩니다.

텍스트 상자의 height 와 padding 직접 수정하여 작동하는지 확인하십시오.

全局样式추가 :

 $ inputheight : 38px; $ inputfontsize : 16px; .el-textArea {textArea {padding : 8px; // 패딩 높이 설정 : $ inputheight; // 높이 글꼴 크기 설정 : $ inputFontsize; 라인 높이 : 21px; }}

그것을 수정 한 후, 나는 그것을 발견했다.

• 패딩은 이미 새로운 크기입니다
• 높이는 내가 설정 한 높이가 아닙니다

흥미롭게 도이 텍스트 상자의 height 인라인 스타일로 제어됩니다.

이 문제에 직면하여 두 번의 시도를했습니다

height 설정 !important , 높이가 변경되었지만 자동으로 확장 할 수는 없습니다.

-> 포기하십시오

스타일이 마음대로 변경 될 수 있도록 textarea 구성 요소를 직접 작성하지만文本框随内容扩展약간 비싸다.

-> 선호하는 용도가 없습니다

디버깅 과정에서, Element UI 에서 autosize textarea 의 초기 높이는 padding 값에 따라 변할 것임이 밝혀졌습니다.

그래서, 나는지지하는 높이가 figma 에 필요한 높이와 일치 할 때까지 브라우저의 padding 크기를 조정했습니다.

그런 다음 글로벌 스타일의 padding 해당 값으로 변경하십시오.

 $ inputfontsize : 16px; .el-textArea {textArea {패딩 : 7.5px 0 7.5px 8px; // TextArea font-size의 높이에 영향을 미치기 위해 여기에서 패딩을 변경합니다. $ inputfontsize; 라인 높이 : 21px; }}

이것은 UI 요소에서자가 크기의 텍스토리의 높이를 설정하는 방법에 대한이 기사의 끝입니다. 보다 관련 요소 UI Autosize TextArea 컨텐츠는 wulin.com의 이전 기사를 검색하거나 아래 관련 기사를 계속 찾아보십시오. 나는 모두가 앞으로 Wulin.com을 지원하기를 바랍니다!