jqueryjquery-ui

Selectmenu goes off the screen if near the edge

div.ui-selectmenu-menu goes off the screen if Selectmenu is near the right edge of the window.

This is the default Selectmenu behaviour, I guess.

(Similar thing happens if Selectmenu is near the bottom edge of the window.)

What I want to do is to move the div.ui-selectmenu-menu a bit to the left, ie. to align it to the right edge of the Selectmenu, but only if given Selectmenu is problematic (I want to keep default alignment for all the other menus).

I've come up with some kind of a solution, but it's not working 100%: https://jsfiddle.net/rh6gjkpt/

I don't get expected behaviour first time when I open Selectmenu. When I close and open it again, then it works.

Solution

  • This is a jQueryUi problem and it is not up to you.

    What is happening

    When you create the Ui component it renders only the select box as you ee it. When you click for the first time on the component it then calculated the width of the elements.

    This is why for the first time you see a list that overflows and then when you open it again it breaks into multiple lines.

    Before calculation (component init): init

    After calculation (when clicked): click

    So when you calculate rightOffsetOfAnElement it return a "wrong" value for the first click because the dropdown isn't positioned nor sized the same.

    Solution

    The hack you can use is click it twice when page load so it will invoke the calculate method:

    JS Fiddle

    Recommendation

    I personally wouldn't recommend using jQueryUi because it's old and it doesn't do the job as you see. Also it is really big at 250kb+ you will have better luck combining small components. For example tooltip tippy.js is 14kb and it has much more options then the jQueryUi tooltip.

    Also use Select2. Make your life easier.