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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Anonymous
    (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
    (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?

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

    https://www.universita.it/

    Any screen width smaller than 767px.

    Thanks

    Trevor
    (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?

    Anonymous
    (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
    (Private)  December 11, 2018 at 5:00 pm #195978
    This reply has been marked as private.
    Anonymous
    (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
    (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;
}
    Anonymous
    (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)