How to fix search field below header in submenu of jQuery mobile

Question

I have a main menu and a click on the main menu opens a sub menu with multiple items. Below the sub-header is a search-field .

I want to fix the search-field below the sub-header so that it doesn't scroll with all the options any longer.

I am not sure whether this can be done with CSS. I didn't get it to work by adding overflow-y: scroll to .ui-input-search .

 $(document).on("pagecreate", "#demo-dialog", function(e) { var form = $("<form><input data-type='search'/></form>"), page = $(this); $(".ui-content", this) .prepend(form); form.enhanceWithin() .on("keyup", "input", function() { var data = $(this).val().toLowerCase(); $("li", page).addClass("ui-screen-hidden") .filter(function(i, v) { return $(this).text().toLowerCase().indexOf(data) > -1; }).removeClass("ui-screen-hidden"); }); $(document).on("pagecontainerhide", function() { $("#demo-menu li").removeClass("ui-screen-hidden"); $("input", form).val(""); }); }); $(document).on("pagebeforeshow", ".ui-dialog", function() { $(".ui-dialog .ui-header a").buttonMarkup({ theme: "e", iconpos: "left", icon: "delete" }); }); $(document).on("change", "#multi", function() { if ($("option:selected", this).length == 0) { $(".ui-dialog .ui-header a .ui-btn-text").text("Close"); } if ($("option:selected", this).length > 0) { $(".ui-dialog .ui-header a .ui-btn-text").text("Done!"); } });

 .ui-selectmenu.ui-popup .ui-input-search { margin-left: .5em; margin-right: .5em; } .ui-selectmenu.ui-dialog .ui-content { padding-top: 0; max-height: 85vh; overflow-y: scroll; } .ui-selectmenu.ui-dialog .ui-selectmenu-list { margin-top: 0; } .ui-selectmenu.ui-popup .ui-selectmenu-list li.ui-first-child .ui-btn { border-top-width: 1px; -webkit-border-radius: 0; border-radius: 0; } .ui-selectmenu.ui-dialog .ui-header { border-bottom-width: 1px; padding-left: 50px; }

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <form> <div class="ui-field-contain"> <label for="demo">Long list:</label> <select name="demo" id="demo" multiple="multiple" data-native-menu="false" class="filterable-select"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> </div> </form>

Answer 1

From JQM documentation:

Custom select menu

The custom select uses a popup with a listview to display the menu. For long lists a dialog will be used.

If You need to stick some elements inside, and scroll only the long list of items, the framework will always display a popup, because the resulting total height of the list items will never exceed the screen height.

So, the problem here is to compute the maximum height of the submenu-listview that does not exceed the screen height, to tell the framework that the scrollable dialog page is not needed here anymore.

EDIT: Hotfix for mobile popup repositionTo: "origin" on window resize

 $(document).on("selectmenucreate", "select[data-native-menu=false]", function(e, ui) { var data = $(this).data("mobile-selectmenu"), hide = {"display": "none"}; data.list.attr("data-filter", "true").find("li[data-placeholder='true']").css(hide); $("#" + data.menuId).css("max-height", "0"); $("#" + data.popupId) .enhanceWithin() .popup("option", {positionTo: data.button, history: false}) .data('mobile-popup').renderData = {selectId: this.id, mH: 0, hH: 0, fH: 0, iH: 0}; $(this).on("change", function () { if ($("option:selected", this).length === 0) { data.headerClose.addClass("ui-icon-delete").removeClass("ui-icon-check"); } else { data.headerClose.addClass("ui-icon-check").removeClass("ui-icon-delete"); } }); }); $(document).on("popupbeforeposition", function(e, ui) { var popup = $(e.target), data = popup.data("mobile-popup"), rD = data.renderData; if(rD) { var select = $("#" + rD.selectId); var sH = $.mobile.getScreenHeight(); if (rD.iH === 0) { rD.mH = popup.outerHeight(true) - popup.height(); rD.hH = popup.find('.ui-header').outerHeight(true); rD.fH = popup.find('.ui-filterable').outerHeight(true); rD.iH = popup.find('li').outerHeight(true); } var maxItems = ((sH - rD.mH - rD.hH - rD.fH - 50) / rD.iH)|0, maxHeight = maxItems * rD.iH; select.data("mobile-selectmenu").list.css("max-height", maxHeight+"px"); } }); $(document).on("popupafterclose", function(e, ui) { var popup = $(e.target), data = popup.data("mobile-popup"), rD = data.renderData; if(rD) { popup.find("li").removeClass("ui-screen-hidden"); popup.find(".ui-filterable input").val(""); $("#" + rD.selectId).data("mobile-selectmenu").list.css("max-height", "0"); } });

 /* scrollable listview for select popup */ .ui-selectmenu-list.ui-listview { overflow-x: hidden; overflow-y: auto; } /* just some air around the popup */ .ui-selectmenu.ui-popup { padding: 0.6em; } .ui-selectmenu .ui-header .ui-icon-delete { background-color: orange !important; border: 1px solid red !important; } .ui-selectmenu .ui-header .ui-icon-check { background-color: #90ee90 !important; border: 1px solid green !important; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" /> <script src="https://code.jquery.com/jquery-2.2.3.js"></script> <script> $( document ).on( "mobileinit", function() { $.widget( "mobile.popup", $.mobile.popup, { _resizeTimeout: function() { if ( this._isOpen ) { if ( !this._expectResizeEvent() ) { if ( this._ui.container.hasClass( "ui-popup-hidden" ) ) { this._ui.container.removeClass( "ui-popup-hidden ui-popup-truncate" ); this.reposition( { positionTo: this.options.positionTo } ); /* hotfix */ this._ignoreResizeEvents(); } this._resizeScreen(); this._resizeData = null; this._orientationchangeInProgress = false; } } else { this._resizeData = null; this._orientationchangeInProgress = false; } } }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script> </head> <body> <div data-role="page" id="page-select-country"> <div data-role="content"> <div class="ui-field-contain"> <label for="country-select">Select Country</label> <select name="country-select" id="country-select" multiple="multiple" data-native-menu="false"> <option>Choose Your Country</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> </select> </div> <div class="ui-field-contain"> <label for="city-select">Select City</label> <select name="city-select" id="city-select" multiple="multiple" data-native-menu="false"> <option>Choose Your City</option> <option value="LA">Los Angeles</option> <option value="NY">New York</option> <option value="SF">San Francisco</option> <option value="WH">Washington</option> </select> </div> </div> </div> </body> </html>

Just a note aside: a popup can be also closed by hitting the ESC key or by clicking/tapping outside of it.