Bootstrap Input with datalist dropdown doesn´t work on iPhone (6s)
<p>I wrote a simple <code>HTML5</code> / <code>Javascript</code> application. 
I used the <code>bootstrap3</code> (<code>js</code> &amp; <code>css</code>).
The app itself should be mobile friendly: </p>

<pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
</code></pre>

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

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

<p>The list works fine on Android 5.x phones with chrome and firefox browser.</p>

<p>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?</p>

<p>Thanks!</p>