maxDropHeight option creates horizontal bar

[GoogleCodeExporter]

It's easy to reproduce the problem because you can see in your own demo.

Go to the example "Long list of options, with scroll and disabled items"

Click in the selector and you will see that, with the option "maxDropHeight" 
the horizontal scroll appears.

Image attached

Original issue reported on code.google.com by dant...@gmail.com on 20 Sep 2010 at 10:21

Attachments:

• [jQuery Dropdown CheckList.png](https://storage.googleapis.com/google-code-attachments/dropdown-check-list/issue-122/comment-0/jQuery Dropdown CheckList.png)

[GoogleCodeExporter]

By the way ... I'm with last Chrome in a Mac, but tested in IE8 in Windows 
Vista has same results ...

Original comment by dant...@gmail.com on 21 Sep 2010 at 6:13

[GoogleCodeExporter]

This is a known limitation with the width calculation. See the comments on the 
documentation for the maxHeight option.

If anyone out there can provide a fix, I would be happy to incorporate it into 
the code. The work-around is to provide a fixed width that has enough room for 
the vertical scroll bars.

Original comment by womohun...@ittrium.com on 21 Sep 2010 at 2:03

• Changed state: Accepted
• Added labels: Priority-Low
• Removed labels: Priority-Medium

[GoogleCodeExporter]

I don't like the solution, but:

.ui-dropdownchecklist .ui-widget-content { margin-right:-15px; }

Besides, there's another thing with "maxDropHeight": I have applied the same 
method to a lot of selectors in a page, and when the selector has not enough 
options to "fill" the maxDropHeight, it appears an ugly space with no options.

Solution: I don't like it but it's a work-around:

After var maxDropHeight is create in _setSize:

maxDropHeight = (this.element.get(0).options.length*20) || maxDropHeight;

I'll look for a more stable solution ;)

Original comment by dant...@gmail.com on 21 Sep 2010 at 8:58

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I've "fixed" it by re-calculating width of the drop container only if max width 
is set and horizontal scrollbar appears.
Try to add the following line at the end of dropWidth calculation

if ((dropCalculatedSize.height > maxDropHeight) && (maxDropHeight != -1)) 
dropWidth += 17;

Original comment by pa...@kania.org.pl on 13 Jan 2011 at 11:28

[GoogleCodeExporter]

I have decided that explicitly setting the width in this situation is an 
appropriate work around, and no other development action will be taken.  In 
particular, you cannot assume that all browsers and end-user configurations use 
a scroll bar that is 17 pixels wide.

Original comment by womohun...@ittrium.com on 13 Apr 2011 at 5:23

• Changed state: WontFix

[GoogleCodeExporter]

Nasty bug!

I resolved this by this CSS rule:

.ui-dropdownchecklist-item {
    padding-right: 20px;
}

It does not work in IE7, although it does not break anything so it is good 
enough. You can see it in action here: http://dovolena.idnes.cz/

Original comment by Josef.S...@gmail.com on 23 May 2011 at 5:29

[GoogleCodeExporter]

Issue 192 has been merged into this issue.

Original comment by womohun...@ittrium.com on 5 Jul 2011 at 2:27

[GoogleCodeExporter]

I have decided to re-open this issue with the hope of getting some community 
feedback on a reasonable way to address this. 

OK, folks, how do we determine how wide the scroll bar is on the various 
browsers? Especially since mobile devices like the iPad do not display any 
scroll bar at all?
All ideas and suggestions are welcome.

Original comment by womohun...@ittrium.com on 5 Jul 2011 at 2:31

• Changed state: Accepted

[GoogleCodeExporter]

There is two additional ways other than providing a fixed width.

Either give a 'large enough' buffer like the above poster with +17px OR
use a scrollbar dimension plugin like this: 
https://github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/jquery.gets
crollbarwidth.js

Personally, I don't want to add another file/plugin and favour the adding a 
'large enough' buffer method. I have modified your source on my site by adding 
the following:

Line 732: // automatically add padding for vertical scrollbar
Line 733: controlWidth=(options.maxDropHeight != null) ? controlWidth+20 : 
controlWidth;

After:
if (options.width != null) {
                controlWidth = parseInt(options.width);
            } else if (options.minWidth != null) {
                var minWidth = parseInt(options.minWidth);
                // if the width is too small (usually when there are no items) set a minimum width
                if (controlWidth < minWidth) {
                    controlWidth = minWidth;
                }
            }

My method basically adds 20 additional pxs to the _control_ instead of the 
droplist as I spotted you have a code in the droplist to match the width of the 
control anyway further down. This ensures I have a 'nice' looking control 
everytime I specify maxDropHeight.

Original comment by ronald...@gmail.com on 7 Jul 2011 at 6:45

[GoogleCodeExporter]

I hacked an old version of the plugin to fix this bug, but now there have been 
released some new versions and I didn't feel like changing the plugin each time 
a new version would come out. Now I added the following CSS to hide the 
scrollbar. Should work in all newer browsers including IE7+. It's not an actual 
and the prettiest solution, but it works. 

.ui-dropdownchecklist-dropcontainer {
    (...)
    overflow:auto;
    overflow-x:hidden;
}

Original comment by carlober...@gmail.com on 15 Jun 2012 at 2:31

[GoogleCodeExporter]

I have fixed that with these lines:

            // the drop container height can be set from options
            var maxDropHeight = (options.maxDropHeight != null)
                                ? parseInt(options.maxDropHeight)
                                : -1;
            var dropHeight = ((maxDropHeight > 0) && (dropCalculatedSize.height > maxDropHeight))
                                ? maxDropHeight
                                : dropCalculatedSize.height;
            // ensure the drop container is not less than the control width (would be ugly)
            var calculatedWidth = dropCalculatedSize.width + ((dropCalculatedSize.height > maxDropHeight) ? 22 : 0);
            var dropWidth = calculatedWidth < controlWidth ? controlWidth : calculatedWidth;

Original comment by drakce.d...@gmail.com on 28 Jun 2012 at 8:02