jQuery UI selectmenus breaks layout

Question

I am using this plugin: http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html (dropdown style)

And it is working well but when i add a selectmenu at the bottom of my page then this happends:

How can i fix this that when the selectmenu is on the bottom that the dropdown comes above instead of under?

The JS i use:

$('select').not("select.multiple").selectmenu({
    style: 'dropdown',
    transferClasses: true,
    width: null
});

Answer 1

I think the version you are using is not the very latest. You should check the source from the GitHub repository, which is the official repository.

The version from GitHub uses jquery.ui.position from jQuery UI, which allows you to specify where to display the menu relatively to the element ("top top", "left bottom"...) and also allows collision detection.

From the documentation:

When the positioned element overflows the window in some direction, move it to an alternative position. Similar to my and at, this accepts a single value or a pair for horizontal/vertical, eg. "flip", "fit", "fit flip", "fit none".

So you'd rather use the plugin this way:

$('#myelement').selectmenu({
    ...
    position: {
        my: "left top", // default
        at: "left bottom", // default

        // "flip" will show the menu opposite side if there
        // is not enough available space

        collision: "flip"  // default is ""
    }
});

Check the following question for similar problem explained (the method _refreshPosition() seems to not exist anymore as is but the option position is of course still there).