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

Question

I like the custom multi select control that jquery-mobile has and which it wants to use. Therefore, please do not offer to put data-role = "none". But I just don't want the default behavior in the selection list to open in a new dialog box if the parameter list is long.

Cause. I do not want this behavior to be that it does not work so well on the ipad. It is difficult to close it using the "X" to the left of the dialog box. For some reason, it becomes ipad immune but works great on the desktop.

Answer 1

So we pulled very deep into jQuery javascript (it was painful) to find out where this full-screen view solution was made for a multi-select list. This code tells me that there is no flag as such so that I can avoid it.

However, since it depends 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) to reduce the size of the list:

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

If you want to be sure that you will not see the dialog box, then the dirty fix would be to put some overrides in your local copy of jquery mobile code (I hate doing this, but this is 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 }); }