scrollbar - Force jQuery UI dialog to show scroll bars -
i'm using jquery ui dialog boxes on site show pop-up forms. forms tend longer modal box, there vertical scrolling involved.
when scroll trackpad or mousewheel vertical scroll bar shows on right hand side , fades out again. need scroll bar visible @ times.
i've googled no avail. idea how this?
here's html:
<p class="open-support-form">click request support</p> <div id="support-form" class="dialog" title="request support"> <p>support line: 0800 123 4567</p> <p>email: helpdeskuk@company.com</p> <p><a href="#">screensteps manual</a></p> <p>more content</p> </div>
here's jquery:
// support form jquery( "#support-form" ).dialog({ autoopen: false, height: 500, width: 500, modal: true, close: function() { allfields.val( "" ).removeclass( "ui-state-error" ); } }); jquery( ".open-support-form" ) .click(function() { jquery( "#support-form" ).dialog( "open" ); });
here's fiddle: http://jsfiddle.net/nk4fm/1/
this webkit issue. can learn more here: how can prevent scroll bars being hidden os x trackpad users in webkit/blink?.
i added following css:
.ui-dialog-content::-webkit-scrollbar { -webkit-appearance: none; width: 11px; height: 11px; } .ui-dialog-content::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid white; /* should match background, can't transparent */ background-color: rgba(0, 0, 0, .5); }