Question

I’m using this plugin with jQuery 1.6.1 and jQuery UI 1.8.14 to create a dropdownchecklist and having this problem.

The code is this:

$(el).dropdownchecklist({ 
    firstItemChecksAll: true
    ,icon: {}
    ,maxDropHeight: 150
    ,width: 160 
});

Tried to solve via css, but wont works. In FF works perfectly.

Answer 1

I ran into the same problem and this is what I found:

I had a width of 200px, of which the icon was 16px and the text area was 180px. The padding of the text area was 3px, and with the ie7 layout, the padding gets added to the total width (180+16+3+3 = 202 which is greater than 200 so it flows into 2 lines).

In order to fix it, I added this css which just changes the text padding to 2px:

span.ui-dropdownchecklist-text
{
    padding:2px;    
}