JavaScript ant-design의 Form.Item label의 width 설정하는 방법.
페이지 정보
본문
antd에서 Form.Item을 사용하면 쉽게 라벨과 셀렉트 박스 콘트롤을 만들 수 있습니다. 그런데, label의 텍스트가 길면 select에 가려지는 버그? 현상? 뭐 이런게 있습니다. 그래서, label의 텍스트 길이에 따라서 줄바꿈을 하거나 사이즈를 키워줘야 합니다. 디자인을 망치지 않기 위해 label의 width를 설정하려면 아래 코드와 같이 labelCol 속성에 width 스타일을 적용시킬 수 있습니다. selectLabelWidth는 변수입니다.
<Form.Item label={d.alias} labelCol={{style: {width: selectLabelWidth}}}>
<Select
style={{width: '100%'}}
공통으로 사용하는 컴포넌트라서 selectLabelWidth로 라벨의 넓이 값을 받아옵니다. 그리고, style: {width: 200}과 같이 설정할 수 있습니다. 일반적으로 style={{width: 200}}과 같이 사용합니다. 하지만, Form.Item의 라벨은 일반적인 방법으로 설정이 불가능합니다. labelCol 속성에 예제와 같이 설정하세요^^
개발자에게 후원하기
추천, 구독, 홍보 꼭~ 부탁드립니다.
여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~
감사합니다~
추천0 비추천0
- 이전글Azure DevOps의 Wiki에서 서브 불렛(Bullet) 사용하는 방법. 23.04.11
- 다음글리엑트에서 hook page onload 이벤트 처리하기. (useEffect) 23.04.11
댓글목록
등록된 댓글이 없습니다.