jqueryjquery-uidrop-down-menujquery-ui-selectmenu

jquery-ui selectmenu fix on screen when i scrolling

On my site there is a panel (with vertical scrollbar) inside which elements are located. 

<div id = 'panel' style = 'width: 200px; height: 600px; overflow-y: scroll;'>
    <select id = 'select-in-panel'></select>
</div>

The jquery-ui menuselect is connected to the elements.

$('select-in-panel').selectmenu();

When I click on an item and a large drop-down list is expanded, it scrolls with the main window, not with the panel.

The drop-down list of jquery-ui selectmenu is fixed on the screen and does not move when I scroll the slider of the panel (div), but it moves when I scroll the slider in the main window (body). It seems to me that the parent of the drop-down list of jquery-ui selectmenu is the main window, not the panel.

How to fix it?

And second question:

Can I set the maximum size of the drop-down list box to scroll within this window if the list of items is large.

Now the entire list is displayed as a whole

Solution

  • You can specify which element to append the menu to:

    $('select-in-panel').selectmenu({
  appendTo: '#panel'
});

    You can set the height of the drop down box so that it becomes scrollable when there is overflow:

    $('select-in-panel').selectmenu("menuWidget")
  .addClass('overflow');

    And then in your css:

    .overflow { height: 200px; }

    Refer to the documentation for more information and examples: http://api.jqueryui.com/selectmenu