2013-07-01 1 views
0

내 웹 페이지에 Chosen Plug-in을 구현했으며 훌륭하게 작동했습니다. 최근에 저는 960 그리드 시스템으로 전환하여 내 페이지를 개조하기로 결정했습니다. 이 작업을 수행했을 때 Chosen Plug-in의 스타일이 그리드 시스템을 망치는 것처럼 보이므로 그리드의 윤곽선이 왼쪽의 스크린에서 벗어납니다. 나는 그리드가 상대적으로 떠 다니는 방법과 플러그의 스타일이 단지 그것을 버리고있는 것과 무언가를해야한다는 느낌이 들었다. 그러나, 나는 이것을 일으키는 스타일에 정확히 무엇이 있는지, 어떻게 바꿀 수 있는지를 찾을 수 없습니다. 나에게 조언을 해 줄 수있는이 플러그인에 대한 경험이있는 사람이 있습니까? 기능적으로이 플러그인을 제거하지 않아도됩니다.Javascript Chosen PlugIn with Grid System

편집 : 드롭 다운을 클릭해도 스타일이 올바르게 보입니다. 드롭 다운 항목이 표시되지 않는 경우에만 해당됩니다.

+0

가능 공유하는 경우 코드 여기 또는 jsfiddle에서

여기 내 코드입니다. – Praveen

답변

0

이 하나의 그림.

절대 위치 지정 -99999px 대신에 드롭 다운의 CSS 속성을 display: none으로 변경해야했습니다.

.chzn-container .chzn-drop { 
    width: 100% !important; 
    display: none; 
    background: #f6fbfd; 
    border: 1px solid #9fbeca; 
    border-top: 0; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 900; 
    width: 100% !important; /*to line up the right side visually*/ 
    -moz-box-sizing : border-box; 
    -ms-box-sizing : border-box; 
    -webkit-box-sizing: border-box; 
    -khtml-box-sizing : border-box; 
    box-sizing: border-box; 

가 그럼 난 그냥 여기 인라인 값을 설정 :

.chzn-container.chzn-with-drop .chzn-drop { 
    left: 0; 
    display: inline; 
}