I have implemented the Chosen Plug-in on my web page and it worked great. Recently I decided to switch over to the 960 grid system to give my page a facelift. When I did this though, the styles in the Chosen Plug-in seem to be messing with the grid system causing the outlines on the grid to go off of the screen to the left. I have a feeling this has to do something with how the grid is floated relatively and the styles in the plug in are just throwing it off. However, I can't seem to find what exactly in the styles that is causing this or how I can change it. Has anyone had any experience with this plug in who might be able to give me advice? I would rather not have to strip this plug in, since functionally, it works great!
EDIT: Although, when I click on the drop down, the styles seem to look right. It is only when the drop down items are not showing.
Figured this one out.
I had to change the CSS property of the dropdown to display: none
instead of absolute positioning -99999px left.
Here is my code:
.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;
Then I just set the value to inline here:
.chzn-container.chzn-with-drop .chzn-drop {
left: 0;
display: inline;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.