Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › Select2 dropdown menu on mobile

Viewing 9 posts - 1 through 9 (of 9 total)
  • Valerio Rossi
    (Private)  December 11, 2018 at 1:41 pm #195888

    By using the select2 option on mobile I see an extra space on the right of the screen when I open a menu to select an option.
    Is there a way to avoid it?

    I can leave a link here if you want.

    Trevor Moderator
    (Private)  December 11, 2018 at 3:34 pm #195917

    Are you able to send me a live link/URL to your search page so I can take a look?

    At approximately what screen width (in px) should I test it?

    Valerio Rossi
    (Private)  December 11, 2018 at 3:37 pm #195919

    https://www.universita.it/

    Any screen width smaller than 767px.

    Thanks

    Trevor Moderator
    (Private)  December 11, 2018 at 4:15 pm #195936

    This was taken at 677px:

    https://www.screencast.com/t/9MHjiVH1IbH

    Where do you see the extra white space?

    Valerio Rossi
    (Private)  December 11, 2018 at 4:26 pm #195959

    Once you open the dropdown menu, move the screen to the left, as if you want to scroll to the right. Then you will see the extra white space on the right border (about 10-30px).

    Trevor Moderator
    (Private)  December 11, 2018 at 5:00 pm #195978
    This reply has been marked as private.
    Valerio Rossi
    (Private)  December 11, 2018 at 5:03 pm #195980

    Thanks a lot, I really appreciate your effort.
    I will clean the cache and turn the wp-rocket plugin off for 24h.

    Trevor Moderator
    (Private)  December 12, 2018 at 12:55 pm #196049

    Can you try this custom CSS? It might break things though, so beware:

    .select2-container {
  left: auto !important;
}
.select2-container--open .select2-dropdown {
  left: 22px !important;
}
    Valerio Rossi
    (Private)  December 12, 2018 at 1:58 pm #196069

    Thanks a lot Trevor. I had to adjust a bit your code in order to make it look ok on any screen dimension up to 767px, like so:

    .select2-container {
    left: auto !important;
}
.select2-container--open .select2-dropdown {
    left: 2% !important;
    margin-left: 11px;
}

    It was very tricky, thanks again 😉

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Select2 dropdown menu on mobile’ is closed to new replies.