Chosen: μ„ νƒν•œ μž…λ ₯을 ν•„μˆ˜ ν•„λ“œλ‘œ λ§Œλ“€κΈ°

에 λ§Œλ“  2012λ…„ 02μ›” 14일  Β·  6μ½”λ©˜νŠΈ  Β·  좜처: harvesthq/chosen

λ‚΄ μ›λž˜ λ§ˆν¬μ—…μ€ 선택 ν•­λͺ©μ„ required ν•„λ“œλ‘œ μ„€μ •ν–ˆμ§€λ§Œ Chosen이 이λ₯Ό μ€€μˆ˜ν•˜μ§€ μ•ŠλŠ” 것 κ°™μŠ΅λ‹ˆκΉŒ?

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λͺ¨λ“  select μš”μ†Œμ— λŒ€ν•΄ Chosen을 μ‚¬μš©ν•˜λŠ” 경우 이 CSSλ₯Ό μ‚¬μš©ν•˜μ—¬ (DOM에) ν‘œμ‹œλ˜λ„λ‘ λ³€κ²½ν•  수 μžˆμ§€λ§Œ 뢈투λͺ…도, 높이, μ ˆλŒ€ μœ„μΉ˜λŠ” μ—†μŠ΅λ‹ˆλ‹€.

μ΄λŸ¬ν•œ CSS μ„ νƒκΈ°λŠ” 잘λͺ»λœ 선택 μš”μ†Œλ₯Ό λŒ€μƒμœΌλ‘œ ν•˜λ©° κ·Έ 쀑 ν•˜λ‚˜κ°€ multiple λ₯Ό λŒ€μƒμœΌλ‘œ 15px margin-top λ₯Ό μΆ”κ°€ν•˜μ—¬ 닀쀑 선택 μš”μ†Œμ˜ 쀑앙에 λ°°μΉ˜ν•©λ‹ˆλ‹€.

select:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
}

select:invalid[multiple] {
    margin-top: 15px !important;
}

데λͺ¨: http://jsfiddle.net/tripflex/2zdeu9oc/

λͺ¨λ“  6 λŒ“κΈ€

@jbrooksuk 이에 λŒ€ν•œ 해결책을 찾은 적이 μžˆμŠ΅λ‹ˆκΉŒ? jQuery Validateλ₯Ό μ‚¬μš©ν•˜λ©΄ ν•„λ“œκ°€ ν•„μˆ˜ ν•­λͺ©μ΄ λ˜λ„λ‘ κ°•μ œν•  수 μ—†λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€.

#515에 참쑰된 이에 λŒ€ν•œ νŒ¨μΉ˜κ°€ 있고 #900에 pull μš”μ²­μ΄ μžˆμŠ΅λ‹ˆλ‹€.

μ„ νƒν•œ μš”μ†Œμ— λŒ€ν•΄ μˆ˜λ™μœΌλ‘œ 이 검사λ₯Ό μˆ˜ν–‰ν•˜λŠ” λ„μš°λ―Έ ν•¨μˆ˜λ₯Ό μž‘μ„±ν–ˆμŠ΅λ‹ˆλ‹€. @CaptainN 의 μ†”λ£¨μ…˜μ΄ μ’‹μ•„ λ³΄μ΄μ§€λ§Œ 찾을 수 있으면 내일 νŒŒν—€μ³ λ³΄κ² μŠ΅λ‹ˆλ‹€.+1:

이것은 https://github.com/harvesthq/chosen/issues/515의 μ†μž„μˆ˜μž…λ‹ˆλ‹€. μš°λ¦¬λŠ” 거기에 따라 갈 κ²ƒμž…λ‹ˆλ‹€. 감사 ν•΄μš”.

515λŠ” 기술적으둜 μ΄κ²ƒμ˜ μ†μž„μˆ˜μ΄μ§€λ§Œ λ„€ λ§žμŠ΅λ‹ˆλ‹€.

λͺ¨λ“  select μš”μ†Œμ— λŒ€ν•΄ Chosen을 μ‚¬μš©ν•˜λŠ” 경우 이 CSSλ₯Ό μ‚¬μš©ν•˜μ—¬ (DOM에) ν‘œμ‹œλ˜λ„λ‘ λ³€κ²½ν•  수 μžˆμ§€λ§Œ 뢈투λͺ…도, 높이, μ ˆλŒ€ μœ„μΉ˜λŠ” μ—†μŠ΅λ‹ˆλ‹€.

μ΄λŸ¬ν•œ CSS μ„ νƒκΈ°λŠ” 잘λͺ»λœ 선택 μš”μ†Œλ₯Ό λŒ€μƒμœΌλ‘œ ν•˜λ©° κ·Έ 쀑 ν•˜λ‚˜κ°€ multiple λ₯Ό λŒ€μƒμœΌλ‘œ 15px margin-top λ₯Ό μΆ”κ°€ν•˜μ—¬ 닀쀑 선택 μš”μ†Œμ˜ 쀑앙에 λ°°μΉ˜ν•©λ‹ˆλ‹€.

select:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
}

select:invalid[multiple] {
    margin-top: 15px !important;
}

데λͺ¨: http://jsfiddle.net/tripflex/2zdeu9oc/

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰