How do I change the view of a select's options on mobile devices?

Question

How do I change the view of a select's options on mobile devices?

Navigation

#1 by (2 votes)

2

Before starting to clean my CSS and JS files, when I opened a select on my mobile device (Windows Phone with IE) it would open the options on a black screen that overlapped that of the page, and would only disappear later of the option is selected (or the operation is canceled by the back button).

Something like this:

Butnowithasstoppedworking,andisopeningupinthenormal(andunwanted)way,likethis:

DuringthisprocessIremovedallCSSthatwasnotusedfromapagerunninginthebrowser,IstoppedreferencingJQueryMobile(butitalreadyincludesagainandI'mprettysureitwasnot)p>

Themetaname"viewport" looks like this:

<meta name='viewport' content='width=device-width, initial-scale=1.0'>

I'm using selectpicker , and the HTML looks like this:

<label for="Cdiainicio">
                <select name="Tdiainicio" id="Cdiainicio" class="selectpicker" data-width="70px">
                    <?php include $_SERVER['DOCUMENT_ROOT'] . "/models/scripts/datas/combos/combodia.html"?>
                </select>
            </label>

(I already tried to remove data-width but did not solve)

In the combodia.html file are the options:

<option value='dia'>Dia</option>
<option value='01'>1</option>
<option value='02'>2</option>
<option value='03'>3</option>
<option value='04'>4</option>
<option value='05'>5</option>
<option value='06'>6</option>
<option value='07'>7</option>
<option value='08'>8</option>
<option value='09'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>

So what would you like to know how this behavior changes ? Does it have to do with jQuery Mobile? Could it be something in CSS?

css mobile jquery-mobile

asked by anonymous 12.10.2015 / 19:55

1 answer

How to customize scroll bar in div? [duplicate] Sliding divs for content

score 2 · Accepted Answer

Use Javascript to get userAgent and check if the user is accessing the site with a mobile browser. If the value is true, just remove the class that changes the appearance of select .

You can use the regex of detect mobile browsers for this.

var ua = navigator.userAgent || navigator.vendor || window.opera;

if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(ua)) {

   /* Remove a classe 'selectpicker'. */
   document.getElementById('meu-select')
           .classList
           .remove('selectpicker');
}