Force jQuery UI dialog to show scroll bars

Question

I'm using jQuery UI dialog boxes on my site to show pop-up forms. The forms tend to be longer than the modal box, so there is vertical scrolling involved.

When I scroll with my trackpad or mousewheel the vertical scroll bar shows up on the right hand side and then fades out again. I need this scroll bar to be visible at all times.

I've Googled to no avail. Any idea how to do this?

Here's the HTML:

<p class="open-support-form">Click to 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 the 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 my fiddle: http://jsfiddle.net/NK4fM/1/

Refer this URL http://stackoverflow.com/questions/4050076/how-to-always-show-scrollbar-in-browser-using-javascript — Milesh, Apr 25 '13 at 12:39

score 2 · Accepted Answer · edited May 23 '17 at 11:44

This was actually a webkit issue. You can learn more here: How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?.

I added the 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 be transparent */
  background-color: rgba(0, 0, 0, .5);
}

Force jQuery UI dialog to show scroll bars

1 Answers1