prevent dialog view for jquerymobile multi select control with large list of options

Question

So I like the custom multi select control that jquery-mobile has and want to use it. So please don't suggest put data-role="none". But I just don't want the default behavior of the select list to open up in a new dialog window if the list of options is long.

Reason I don't want that behaviour is that it is not working so well on the ipad. It becomes tough to close it using the "X" on the left of the dialog. For some reason, it is becoming unresponsive on the ipad, but works fine on the desktop.

Answer 1

So dug really deep into the jquery mobile javascript (it was painful) to find out where this decision of going full screen is made for the multi select list. This code tells me that there is no flag as such that I can set to avoid it.

However, since it is dependent on the height of the list (menuHeight), the fix that worked for me was to make some css changes (reduced padding for each list item) so that my list size was reduced:

.ui-selectmenu-list li .ui-btn-inner a.ui-link-inherit
{
    padding: .5em 15px .5em 15px;    
}

If you want to be dead sure to not show the dialog, then a dirty fix would be to put some override in your local copy of the jquery mobile code (I hate to do this but that's the only way):

//TODO: vishalkumar : I can override here by replacing below line by if (false)           
if (menuHeight > screenHeight - 80 || !$.support.scrollTop) {

                self.menuPage.appendTo($.mobile.pageContainer).page();
                self.menuPageContent = menuPage.find(".ui-content");
                self.menuPageClose = menuPage.find(".ui-header a");

                // prevent the parent page from being removed from the DOM,
                // otherwise the results of selecting a list item in the dialog
                // fall into a black hole
                self.thisPage.unbind("pagehide.remove");

                //for WebOS/Opera Mini (set lastscroll using button offset)
                if (scrollTop == 0 && btnOffset > screenHeight) {
                    self.thisPage.one("pagehide", function () {
                        $(this).jqmData("lastScroll", btnOffset);
                    });
                }

                self.menuPage.one("pageshow", function () {
                    focusMenuItem();
                    self.isOpen = true;
                });

                self.menuType = "page";
                self.menuPageContent.append(self.list);
                self.menuPage.find("div .ui-title").text(self.label.text());
                $.mobile.changePage(self.menuPage, {
                    transition: $.mobile.defaultDialogTransition
                });
            } 

Answer 2

Perhaps I found a simpler solution using css

.ui-selectmenu{
    max-height: 500px;
}

This prevent jquery mobile to recognize long list of option and it doesn't create dialog.

Note that this will happen for all select controls.

It's better to limit this option only for desktop user, to use the full page dialog in mobile, where is very useful. e.g. using

@media screen and (min-width: 768px) {
    .ui-selectmenu{
        max-height: 500px;
    }
}

Answer 3

Here's a simple bit of CSS that will prevent the dialog version, and give you a scrollbar inside the list instead.

.ui-selectmenu { max-height: calc(95vh - 100px); } 
.ui-selectmenu-list { max-height: calc(95vh - 150px); overflow-y: auto; }