์๋ ํ์ธ์, ๋ค์๊ณผ ๊ฐ์ด ์ ํ ํ๋์์ selected๋ฅผ ์ฌ์ฉํ ๋:
<select id="mySelect" style="width: 65.935%;" multiple>
Chosen์ ํผ์ผํธ ๋์ ๋๋น๊ฐ 65.935ํฝ์
์ธ <ul class="chzn-choices">
๋ฅผ ์์ฑํ์ต๋๋ค. ์ ์ ๋์ ์ฌ๊ธฐ์์ ์ด๊ธฐํ๋ก ํดํนํ์ต๋๋ค.
$('#inputNewRecipient').chosen().next().css('width', '65.9574%');
์๋ถ
์ต์ ๋ฒ์ ์ Chosen์ ์ฌ์ฉํ๊ณ ์์ต๋๊น?
๊ทธ๋ฆฌ๊ณ ์ด๋ค ๋ธ๋ผ์ฐ์ ๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๊น? ๊ทธ๋ฆฌ๊ณ ์ ํ๋ ๋ฒ์ (jQuery ๋๋ Prototype)์ ๋ฌด์์ ๋๊น?
์ด ๋ชจ๋ ๊ฒ์ ์์ด์ ์ฃ์กํฉ๋๋ค - ์กฐ๊ธ ์๋๋ฌ!
์ ํํ ๋ฒ์ ์ up2date(0.9.13), jQuery ๋ฒ์ , ๋ธ๋ผ์ฐ์ ๋ ์ต์ Firefox @ Ubuntu 10.04์
๋๋ค.
๋ฐฉ๊ธ ๋ค์ ํ
์คํธํ๋๋ฐ Bootstrap์ ์ฌ์ฉํ๋ ๋ฐฉ์์ผ๋ก 65.5%์์ 55.5px๋ก ๋ณ๊ฒฝ๋์์ต๋๋ค.
์ฌ์ฉ์ ์ ์ ๋๋น๋ฅผ ์ป๊ธฐ ์ํด ์คํ์ผ/css์ ์์กดํ๋ ์ข์ ๋ฐฉ๋ฒ์ ์์ต๋๋ค(์ต์ ๋ธ๋ผ์ฐ์ ๋ ๋์ ์ค์ ๋๋น๋ฅผ ๋ฐํํฉ๋๋ค). ์ฆ, Chosen์ ์๋์ผ๋ก ํฝ์ ๊ฐ์ผ๋ก ๋๋ฉ๋๋ค. ์ฐ๋ฆฌ๋ ํ๋ฉด ํฌ๊ธฐ ์กฐ์ ์ ๋ํด ๊ฐ์ ๋ก ๋ค์ ๊ณ์ฐํ๋ ๊ฒ์ ์ํ์ง ์์ผ๋ฏ๋ก ๋ฐฑ๋ถ์จ ๋๋น์ ๋ํ ์ ํ์ ์ธํฐํ์ด์ค๋ฅผ ์ ๊ณตํ์ต๋๋ค.
$('#inputNewRecipient').chosen({ width: '65.9574%' });
@pfiller ์ด์ ์ ํํ ์ธํฐํ์ด์ค๋ฅผ ์ฌ์ฉํ์ฌ ๋๋น๋ฅผ ์ค์ ํ๊ณ ์์ต๋๋ค. ์ด์ ๋ด ์๋ฆฌ ํ์์ ํ ์คํธ๊ฐ ์์ฑ๋ ๋๋น๋ก ์๋ ธ์ต๋๋ค: 55px, ์ด๊ฒ์ด ์ ํ๋ ๋ฌธ์ ์ ๋๊น?
Chosen์ ์ ๋ ฅ ํ๋๋ฅผ ์ปจํ ์ด๋ ๋ด์์ ๊ฐ๋ฅํ ํ ํฌ๊ฒ ๋ง๋ญ๋๋ค. ๋๋ก๋ ์๋ฆฌ ํ์์ ํ ์คํธ๊ฐ ์๋ฆฐ๋ค๋ ์๋ฏธ์ ๋๋ค. ํ ์คํธ๊ฐ Chosen์ ๋ง๋๋ก ํ๋ ค๋ฉด Chosen์ ์ต์ํ ๊ทธ๋ ๊ฒ ํฌ๊ฒ ๋ง๋ค์ด์ผ ํฉ๋๋ค.
์ด๊ฒ์ ์กฐ์ฌํ๋ ๋์ ์์ ๋ฌธ์ ๋ฅผ ๋ฐ๊ฒฌํ์ต๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ํน์ ๊ฒฝ์ฐ์ ํ๋๊ฐ ์ปจํ ์ด๋๋ณด๋ค ํฌ๊ฒ ์ฑ์ฅํ ์ ์์ต๋๋ค. ์ฐธ์กฐ: #1167
์์์ ๋๋น๋ ์ฝ 600ํฝ์ ์ด์๊ณ ์๋ฆฌ ํ์์ ํ ์คํธ๋ ์ฝ 6-7์ ํ์ ์๋ ธ์ต๋๋ค.
๊ฐ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
selected์ ๋๋น ์์ฑ์ ๋ฐฑ๋ถ์จ(33%)๋ก ์ค์ ํ๋๋ฐ ์ด๋ฐ ์ผ์ด ๋ฐ์ํฉ๋๋ค.
๋ค์ CSS ์คํ์ผ์ ์ฌ์ ์ํ์ฌ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ต๋๋ค.
... li.๊ฒ์ ํ๋{
๋๋น: 100%;
}
... li.๊ฒ์ ํ๋ ์
๋ ฅ.๊ธฐ๋ณธ{
๋๋น: ์๋ !์ค์;
}
๋น์ทํ ๋ฌธ์ ๋ ์์์ต๋๋ค.
๋ค์ ์คํ์ผ์ ์ฌ์ ์ํ๋ฉด ์ ์๊ฒ ํจ๊ณผ์ ์ด์์ต๋๋ค.
li.๊ฒ์ ํ๋{
๋๋น: 100%;
}
li.search-choice + li.search-field{
๋๋น: 20%;
}
์ด๊ฒ์ ๋๋ฅผ ์ํด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ต๋๋ค.
li.๊ฒ์ ํ๋{
๋๋น: 100% !์ค์;
}
li.search-field input.default{
๋๋น: 100% !์ค์;
}
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด๊ฒ์ ๋๋ฅผ ์ํด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ต๋๋ค.
li.๊ฒ์ ํ๋{
๋๋น: 100% !์ค์;
}
li.search-field input.default{
๋๋น: 100% !์ค์;
}