I'm using library select2 from Pixels Admin Template. I noticed that it is working well on desktop and android device. Yet, the drop down does not open when viewing on iOS device. I did not know why it is.

$(document).ready(function() {
  var init = [];

  init.push(function() {
    var $select2 = $("#Salutation,#Gender").select2();
    $select2.on('select2:select select2:unselect', () => {
      $(":focus").blur();
    });
  })

  window.PixelAdmin.start(init);
});

body .select2-container.select2-container--default.select2-container--open {
  top: 305px!important;
  left: 22px!important;
}

.select2.select2-container.select2-container--default.select2-container--below.select2-container--open {
  top: auto!important;
}

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Select2</title>
<script src=".3.1/jquery.min.js"></script>
<script src="pixel-admin.min.js"></script>
<link rel="stylesheet" href="pixel-admin.min.css">
<link href=".3.7/css/bootstrap.min.css" rel="stylesheet">
<script src=".3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href=".4.5/select2.css" />
<script src=".4.5/select2.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4">
      <h3>Application Form</h3>
      <form class="form" action="/action_page.php">
        <div class="form-group">
          <label for="GivenName">Given Name:</label>
          <input class="form-control" type="text" id="GivenName">
        </div>
        <div class="form-group">
          <label for="Surname">Surname:</label>
          <input class="form-control" type="text" id="Surname">
        </div>
        <div class="form-group">
          <label for="Salutation">Salutation:</label>
          <select class="form-control" name="" id="Salutation">
            <option value="Mrs">Mrs</option>
            <option value="Mr">Mr</option>
            <option value="Miss">Miss</option>
          </select>
        </div>
        <div class="form-group">
          <label for="Gender">Gender:</label>
          <select class="form-control" name="" id="Gender">
            <option value="Female">Female</option>
            <option value="Male">Male</option>
            <option value="Transgender">Transgender</option>
          </select>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</div>

I'm using library select2 from Pixels Admin Template. I noticed that it is working well on desktop and android device. Yet, the drop down does not open when viewing on iOS device. I did not know why it is.

$(document).ready(function() {
  var init = [];

  init.push(function() {
    var $select2 = $("#Salutation,#Gender").select2();
    $select2.on('select2:select select2:unselect', () => {
      $(":focus").blur();
    });
  })

  window.PixelAdmin.start(init);
});

body .select2-container.select2-container--default.select2-container--open {
  top: 305px!important;
  left: 22px!important;
}

.select2.select2-container.select2-container--default.select2-container--below.select2-container--open {
  top: auto!important;
}

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Select2</title>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="pixel-admin.min.js"></script>
<link rel="stylesheet" href="pixel-admin.min.css">
<link href="https://stackpath.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/select2/3.4.5/select2.css" />
<script src="https://cdnjs.cloudflare./ajax/libs/select2/3.4.5/select2.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4">
      <h3>Application Form</h3>
      <form class="form" action="/action_page.php">
        <div class="form-group">
          <label for="GivenName">Given Name:</label>
          <input class="form-control" type="text" id="GivenName">
        </div>
        <div class="form-group">
          <label for="Surname">Surname:</label>
          <input class="form-control" type="text" id="Surname">
        </div>
        <div class="form-group">
          <label for="Salutation">Salutation:</label>
          <select class="form-control" name="" id="Salutation">
            <option value="Mrs">Mrs</option>
            <option value="Mr">Mr</option>
            <option value="Miss">Miss</option>
          </select>
        </div>
        <div class="form-group">
          <label for="Gender">Gender:</label>
          <select class="form-control" name="" id="Gender">
            <option value="Female">Female</option>
            <option value="Male">Male</option>
            <option value="Transgender">Transgender</option>
          </select>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</div>

I included pixel-admin js for you here.

Note It works when I use Request Desktop Site feature on iOS device.

Any suggestion? Please kindly help me. Thanks

• javascript
• jquery-select2

Share Improve this question Follow edited Aug 30, 2018 at 8:19 Houy Narun asked Aug 26, 2018 at 23:51 Houy NarunHouy Narun 1,72599 gold badges4343 silver badges9696 bronze badges 22

• 3.4.5 is nearly five years old, and there are plenty of fixed bugs raised againt iOS on their github. Can you try a newer version of select2? – Rup Commented Aug 27, 2018 at 0:01
• @Rup, understanding about this fixed bug, however I was unable upgrade it to current version 4 in this pixel admin template as all libraries were piled into one file. By using include from external, it is not possible for hidden field as newer version used different method. At all, my project use select2 v3..4.5 Solely. Thanks. – Houy Narun Commented Aug 27, 2018 at 0:05
• Some bugs in this version, I've tried to solved in JS script. – Houy Narun Commented Aug 27, 2018 at 0:06
• do you mean as ipa file or in ios browser ? – Ahmed Amin Shahin Commented Aug 29, 2018 at 0:42
• @AhmedShahin I mean iOS browser. – Houy Narun Commented Aug 29, 2018 at 0:53

 |  Show 17 more ments

3 Answers 3

Sorted by: Reset to default 3 +50

i have done 2 pages for you , the first one contain the drop menu that will remain same view , same functionality over mobile and desktop browsers . please open it through mobile browsers ,

click here to view it ...

for the second page , i have adjusted the code and the drop down list should now work along with pixel & select2 libraries keeping also the same view as well on the mobile / desktop browser ,

you will be able to use them on mobile browser by double click on each drop down menu to open it and select a value , i have left it for you like that so you can change it based on onclick event it will hide menus upon selection for desktop or mobiles browsers.

// show/hide the menu when examples is clicked
$(".dropdown-toggle").on("click", function () {
$(".dropdown-menu").toggle();
});

// for navigation

$("#nav").on("click", "li", function () {
$("#menu-icon").click();
document.getElementById("flag").focus();
//$("#nav").slideToggle();
}); 

and for mobile browsers you can use the below to hide the menus

$(document).on('click touchstart', function () {}

please check the links and find used resources/files

click here to view it ...

the remaining work should be CSS and styling code , you can control that as you like as i see it pointless to adjust the fields without taking your views on it .

as for explanation how i could achieve this task , actually , i had to restrict the way of java-script loading , beside that i have edited almost all the the js libraries and load them through scripts J.S during j query fallback .

Here is the steps to achieve this :

First :

load jquery library through fallback

Second :

load admin-pixel.js load your-pixel.css

Third Step :

load select2.js load select2.css

they have to be loaded in sequence and finally after loading the above you have to write this code so the drop down menu view do not change on mobile browser and it will remain the same functionality as desktop browsers , put them on script tag after loading the J query first then loading the select 2 library

$('select').select2({
minimumResultsForSearch: -1
});

Final steps :

you have to write these Meta Tags and css on your html page

<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta id="viewport" name="viewport" content="width=device-width,initial- 
scale=1.0,user-scalable=no">

CSS Code place it on " " tags:

html {
touch-action: manipulation;
}

As per your request the task is done and you may go through the code on all files to see how js libraries loading in sequence you can download all resources along with html page

through this link ,

Alternative solution for you is , away from your libraries , you may create drop down list fields which they have no issue functioning on mobile browser , then use them on the page which have problems , and upon user selection on these working drop down lists fields , trans-fare / move the value to the broken one belongs to select2 ( do it through java-script and hide the broken drop menu with display:none;

it might seem silly to do that but this is way much faster than going through all these errors which you can face during development for the depreciated library which you are using ....

let me know if there is any issue you are facing since i can't perform a test on your production server. i will be editing my answer eventually for adjusting my answer .

good luck

In case you are still experiencing this problem: I encountered the same problem with the same template on a legacy project and stumbled upon your post. The template has a dependency on a certain version of Fastclick for mobile devices in the pixel-admin.js. Upgrading the Fastclick library in it will solve this for the select2 input fields. However it will not solve the problem with checkboxes and radio buttons (they require double clicks to be checked or selected). Removing the dependency on Fastclick solved it for us in this case.

Not sure what you're trying to achieve, but if you want to push your calls into array, you can do it like below:

var init = [];
init.push(
    $("#Salutation,#Gender").select2().on('select2:select select2:unselect', function () {
        $(":focus").blur();
    })
);

OR you can use IIFE like below:

var init = [];
init.push(function () {
    var $select2 = $("#Salutation,#Gender").select2();
    $select2.on('select2:select select2:unselect', () => {
        $(":focus").blur();
    });
}());