프리티드롭다운 JS

프리티드롭다운 실행문

			$dropdown = $(셀렉트 선택자).prettyDropdown();
		  

• 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 다르게 지정하여 크기 변경 가능