App.SelectToPrettyDropdown 함수는 프리티드롭다운의 실행문과 더불어 프리티드롭다운으로 생성되는 ul li에 적용되는 인라인스타일을 초기화 시킨다.
프리티드롭다운 CSS
.prettydropdown > ul > li에 min-height값을 지정해주어야 safari에서 콘텐츠 내용에 상관없이 같은 높이로 보여진다. (첫번째 요소에 1줄 이상 말줄임 처리를 위해 적용한 -webkit-line-clamp로 인해 첫번째 목록의 글자수가 길 때 safari에서 높이가 줄어들어 보임)
.prettydropdown > ul > li:first-of-type에는 말줄임 처리가 필요하다. 해당 요소의 max-height를 .prettydropdown > ul > li의 min-height 만큼 지정해 주어야 한다.
.prettydropdown의 max-height는 .prettydropdown > ul > li 높이 + 보더만큼 지정해주어야 하므로 기본적으로 2를 더한 px값을 지정해준다. (예: .prettydropdown > ul > li이 max-height: 46px일 때 .prettydropdown에 max-height: 48px 지정) 해당값을 지정해주지 않으면 셀렉박스를 클릭했을 때 옆, 아래에 있는 요소들의 위치가 셀렉박스의 높이 변화로 인해 깨진다.
접근성 고려하여 .prettydown내 select는 display:none 처리를 해주어야한다.
셀렉트를 감싸고 있는 div에 data-width 프로퍼티에 width값을 지정 (App.SetInputSizeAuto 참고)
셀렉트를 감싸는 div의 클래스에 CSS 다르게 지정하여 크기 변경 가능
개수에 상관없이 화면에 가득차는 셀렉박스
App.AddClassRow를 이용하여 셀렉박스 갯수마다 적용되는 row02,row03 등의 클래스에 맞게 width값을 적용