msDropDown child shown only by 3px on the first click

Question

I've a problem with the msDropDown plugin, It seems to work perfectly but when I click the first time on it, the child box with the options appears only by 3px. Then with a second click, it works fine.

I'm using Chrome, Jquery 1.9.1 and msDropDown 3.5.2

Answer 1

I was dealing with same problem and simple solution is to define exact height of LI elements in "child box". For example:

.dd .ddChild li { ... height: 12px; padding: 8px 0; ...}

This works form me.

Answer 2

Setting the line height in the css did not work for me, but with a bit of tinkering around, I found that setting the rowHeight property in the jquery.dd.js file did fix this problem.

e.g.

//dropdown class
function dd(element, settings) {
    var settings = $.extend(true,
        {byJson: {data: null, selectedIndex: 0, name: null, size: 0, multiple: false, width: 250},
        mainCSS: 'dd',
        height: 120, //not using currently
        visibleRows: 7,
        rowHeight: 100, //HEY STACKOVERFLOW - CHANGE THIS!!!!

It's a bit bodgy as it means you need to know in advance how tall you want your items to be, and presumably it could cause problems if you have several msdropdowns on a page which you want to give different heights.

It solved the problem for now, though.

Answer 3

You can also set constant height of the list in CSS:

.ddChild { height: 200px }

Answer 4

this worked for me

.ddChild, .ddChild ul {height:auto !important; max-height: 150px !important;}

Source:

https://github.com/marghoobsuleman/ms-Dropdown/issues/88

Answer 5

I also faced same problem at Google Chrome. I just fixed this with this css code. I added overflow-y .. so scroll will work if list is bigger then 200px

.dd .ddChild {
    height: auto !important;
    max-height: 200px;
    overflow-y: scroll !important;
}