jQuery UI #4441

http://bugs.jqueryui.com/ticket/4441

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<p><a href="http://bugs.jqueryui.com/ticket/4441">jQuery UI bug #4441</a> - If a <code>selectable</code> has a scrollbar, the scrollbar is unusable in Webkit because it triggers selection.</p>

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

CSS

body { padding: 20px; }
p { line-height: 1.5; margin-bottom: 20px; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; height: 200px; overflow: scroll; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 50px; }

JavaScript

$('#selectable').selectable();