Open Select List Above the input

[Rodolfo-XDR]

Is your feature request related to a problem? Please describe.
If you have a select input near the end of your page, I would like to have the list go up instead of going down. I see that the official METRO4 has the same problem.

Describe the solution you'd like
Just make an option to select how you want the list to appear. Down (default) or Up

Describe alternatives you've considered
An alternative would be that the input select would detect the size of page by itself, and automatically make the list go up instead of going down.

[ojosojo]

I have this exact issue, I ended up adding br's at the bottom to solve it... still, It would be a great improvement !

[olton]

Hi! I will try to add it as soon as possible, but for now, you can use this hack for all selects on your page:

var sel = $("[data-role*=select]"); 
sel.on("drop", function (e) {
        var select = Metro.getPlugin($(e.detail.list).closest(".select"), "select");
        var dropContainer = $(e.detail.list).closest(".drop-container").removeClass("drop-up");
        var dropHeight = select.options.dropHeight;
        var rect;

        rect = Utils.rect(dropContainer[0]);

        if (rect.top + dropHeight >= window.innerHeight) {
            dropContainer.addClass("drop-up");
        }
});

[olton]

New in 4.4.0

• Dropdown: add attributes data-drop-up=true|false (default false), data-check-drop-up=true|false (default: false)
• Select: add attributes data-drop-up=true|false (default false), data-check-drop-up=true|false (default: true)

if you set data-drop-up="true" drop object will always be dropped up.
if you set data-check-drop-up="true" drop object will be checked for dropped up, If the dropdown is found to be outside the viewport, it will be shown as dropdown at the top.