I tried Safari and Firefox. For all controls I set display: ‘bottom’, animate: ‘slideup’ for xsmall viewport
However, it drops from the top for selects and ranges on my iphone6. What’s more interesting if I request ‘desktop version’ is starts working as designed but I don’t have a mobile version. No jquery-mobile or anything like this.
It also works as designed nice and smooth in chrome (emulating mobile devices in dev. console)
Am I missing something?
No js errors.
Actually I’d rather describe it more like a flickering then sliding. When I click on a select the whole page scrolls from the top in an instant and then a select form pops-up. (kind of from the top)
Any known issues with bootstrap? Or I should add some mandatory styles like height: 100% or something
I’ve spent the whole day narrowing it down.
I downloaded the example given here: https://demo.mobiscroll.com/jquery/select/basic# and modified it by adding a bunch of
elements right before the form and before the closing
What did I get:
Tapping selects which are inside the form causes the scrolling effect I initially described.
Non-form selects don’t act the same way. The page only flicks once and this is the way better behavior.
In my case selects are inside a form. How do I make them to act as if they are not.
Thanks for the detailed description, I was able to reproduce it.
This only happens, if the select element is wrapped inside a label:
<label>
Select
<select id="test">
...
</select>
</label>
A quick workaround is to use a div instead and a separate label element:
<div>
<label for="test">Select</label>
<select id="test">
...
</select>
</div>
We will fix this in the upcoming release.