Checkboxes in jQuery Mobile Scroll View

Question

Checkboxes in jQuery Mobile Scroll View

163 views Asked by iSofia At 14 September 2024 at 17:26

Is there any reason why checkboxes in the hidden portion of a scrolled window in a jQuery Mobile popup dialog does not work and simply jumps to the top?

    <div data-role="popup" id="chkSelector" data-overlay-theme="a"  
        data-theme="a" data-dismissible="true">

        <div style="width:500px; height:300px; overflow-y:auto;">
            <label for="checkbox-1">021669835973</label> 
            <input name="checkbox-1" id="checkbox-1" type="checkbox">
            <label for="checkbox-2">021669835976</label> 
            <input name="checkbox-2" id="checkbox-2" type="checkbox">
            <label for="checkbox-3">021669835983</label> 
            <input name="checkbox-3" id="checkbox-3" type="checkbox">
            <label for="checkbox-4">021669836973</label> 
            <input name="checkbox-4" id="checkbox-4" type="checkbox">
            <label for="checkbox-5">021669837973</label> 
            <input name="checkbox-5" id="checkbox-5" type="checkbox">
            <label for="checkbox-6">021669855973</label> 
            <input name="checkbox-6" id="checkbox-6" type="checkbox">
            <label for="checkbox-7">021669935973</label> 
            <input name="checkbox-7" id="checkbox-7" type="checkbox">
            <label for="checkbox-8">021669835973</label> 
            <input name="checkbox-8" id="checkbox-8" type="checkbox">
            <label for="checkbox-9">021669835976</label> 
            <input name="checkbox-9" id="checkbox-9" type="checkbox">
            <label for="checkbox-10">021669835983</label> 
            <input name="checkbox-10" id="checkbox-10" type="checkbox">
            <label for="checkbox-11">021669836973</label> 
            <input name="checkbox-11" id="checkbox-11" type="checkbox">
            <label for="checkbox-12">021669837973</label> 
            <input name="checkbox-12" id="checkbox-12" type="checkbox">
            <label for="checkbox-13">021669855973</label> 
            <input name="checkbox-13" id="checkbox-13" type="checkbox">
            <label for="checkbox-14">021669935973</label> 
            <input name="checkbox-14" id="checkbox-14" type="checkbox">                         
        </div> 

    </div>

Only the top ones not cut off below the window height can be selected. Whe the lower ones are scrolled into view and selected, the list just scrolls to the top without selecting it.

Original Q&A

There are 1 answers

**deblocker** · Answer 1 · 2017-10-11 07:31:54

If you are asking for the reason of that, i believe that simply Popups aren't intended and deeply tested for a lot of interactive content, but just for small hints or small navigation menues. If you need to present to the user a lot of interactive content, IMHO a page with the Dialog option is a better choice. Just my two cents.

If you are then asking for a workaround, here is it. Just initialize an External Popup and use that.

$(document).ready(function() {
   $("#chkSelector").enhanceWithin().popup();
});

.ui-popup .ui-checkbox {
  margin-right: 0.5em !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-1.11.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page" id="menu">
      <div data-role="header" data-position="fixed">
        <h1>Header</h1>
      </div>
      <div data-role="content">
        <a href="#chkSelector" class="ui-btn" data-rel="popup">Open Popup</a>
      </div>
    </div>
    
    <div data-role="popup" id="chkSelector" data-overlay-theme="a" data-theme="a" class="ui-content" data-dismissible="true">
        <div style="width:500px; height:300px; overflow-y:auto;">
            <label for="checkbox-1">021669835973</label> 
            <input name="checkbox-1" id="checkbox-1" type="checkbox">
            <label for="checkbox-2">021669835976</label> 
            <input name="checkbox-2" id="checkbox-2" type="checkbox">
            <label for="checkbox-3">021669835983</label> 
            <input name="checkbox-3" id="checkbox-3" type="checkbox">
            <label for="checkbox-4">021669836973</label> 
            <input name="checkbox-4" id="checkbox-4" type="checkbox">
            <label for="checkbox-5">021669837973</label> 
            <input name="checkbox-5" id="checkbox-5" type="checkbox">
            <label for="checkbox-6">021669855973</label> 
            <input name="checkbox-6" id="checkbox-6" type="checkbox">
            <label for="checkbox-7">021669935973</label> 
            <input name="checkbox-7" id="checkbox-7" type="checkbox">
            <label for="checkbox-8">021669835973</label> 
            <input name="checkbox-8" id="checkbox-8" type="checkbox">
            <label for="checkbox-9">021669835976</label> 
            <input name="checkbox-9" id="checkbox-9" type="checkbox">
            <label for="checkbox-10">021669835983</label> 
            <input name="checkbox-10" id="checkbox-10" type="checkbox">
            <label for="checkbox-11">021669836973</label> 
            <input name="checkbox-11" id="checkbox-11" type="checkbox">
            <label for="checkbox-12">021669837973</label> 
            <input name="checkbox-12" id="checkbox-12" type="checkbox">
            <label for="checkbox-13">021669855973</label> 
            <input name="checkbox-13" id="checkbox-13" type="checkbox">
            <label for="checkbox-14">021669935973</label> 
            <input name="checkbox-14" id="checkbox-14" type="checkbox">                         
        </div> 
    </div>
    
  </body>
</html>

TechQA.

Checkboxes in jQuery Mobile Scroll View

There are 1 answers

Related Questions in CHECKBOX

Related Questions in JQUERY-MOBILE

Related Questions in SCROLL

Related Questions in JQUERY-MOBILE-DIALOG

Popular Questions

Popular Tags

Trending Questions