I wrote a simple HTML5 / Javascript application. I used the bootstrap3 (js & css). The app itself should be mobile friendly:

<meta name="viewport" content="width=device-width, initial-scale=1">

On mobile devices the look & feel is as designed, except for one issue: I am using inputs (inside a .well) with datalists like this:

 <div class="form-group">
                  <label for="userIdType">Type:</label>
                  <input type="text" class="form-control" id="userIdType"  list = "lst_userIdTypes" value="AD_ID"> 
                  <datalist id="lst_userIdTypes">
                    <option>AD_ID</option>
                    <option>PU_ID</option>
                    <option>XU_ID</option>
                    <option>DE_ID</option>
                    <option>AP_ID</option>
                  </datalist>
                </div>

The list works fine on Android 5.x phones with chrome and firefox browser.

But on my iPhone (6s) in safari and chrome browser the values of the list don´t show. Is this a known issue? Does anybody know how to fix that?

Thanks!

I wrote a simple HTML5 / Javascript application. I used the bootstrap3 (js & css). The app itself should be mobile friendly:

<meta name="viewport" content="width=device-width, initial-scale=1">

On mobile devices the look & feel is as designed, except for one issue: I am using inputs (inside a .well) with datalists like this:

 <div class="form-group">
                  <label for="userIdType">Type:</label>
                  <input type="text" class="form-control" id="userIdType"  list = "lst_userIdTypes" value="AD_ID"> 
                  <datalist id="lst_userIdTypes">
                    <option>AD_ID</option>
                    <option>PU_ID</option>
                    <option>XU_ID</option>
                    <option>DE_ID</option>
                    <option>AP_ID</option>
                  </datalist>
                </div>

The list works fine on Android 5.x phones with chrome and firefox browser.

But on my iPhone (6s) in safari and chrome browser the values of the list don´t show. Is this a known issue? Does anybody know how to fix that?

Thanks!

• javascript
• iphone
• html
• twitter-bootstrap-3
• responsive-design

Share Improve this question Follow edited Aug 6, 2016 at 13:22 multilevellist 1722 bronze badges asked Aug 5, 2016 at 15:36 mrbmrb 4311 gold badge11 silver badge77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

To all who are still looking: this amazing workaround saved me. It is an editable select via JS which has the same functionality as input + datalist https://github./indrimuska/jquery-editable-select

According to w3schools, Safari does not support datalist tag even though that is part of the HTML5 standard.

http://www.w3schools./tags/tag_datalist.asp

Chrome on iPhone also uses mainly the same engine as Safari since Apple does not enables 3rd party browser engines on their OS. That is why you experienced the same behavior from both browsers on iPhone.

No other solutions, than workarounds can be used in this case.