Can't get animate option to work in responsive select control

I’d like the select control to slide up from the bottom on mobile, but to popup on desktop. I thought this should be relative simple given the “responsive” option, which I’ve used successfully for the display option on other controls, but it seems to ignore the animate option.

This is my code:

$('.breed').mobiscroll().select({
        placeholder: 'Please select',
        display: 'bottom',
        animate: 'slideup',
        rows: 7,
        touchUi: true,
        data: <?=$breeddata?>,
        filter: true,
        responsive: {
            small: {
                display: 'center',
                animate: 'pop'
            },
            medium: {
                touchUi: false
            }
        }
    });

So for the default settings (mobile) I have
display: ‘bottom’,
animate: ‘slideup’,

And for ‘small’ devices (desktop & tablets) I have
display: ‘center’,
animate: ‘pop’,

This works for desktop as it pops into the center, but on my mobile it pops into the bottom. It doesn’t slide up.

Can I not pass ‘animate’ into the responsive option?

Hi @Vincent_Wansink,

I tested your code and I was not able to reproduce this issue. Your code seems okay. Could you share with me how you reproduced this animation issue?

Elod, sorry, I’ve since moved away from using the select and am using a custom popup instead.

1 Like