0

I'm are using SelectBoxIt to style are select lists. We have long lists that need to be scrollable and I have followed the instructions for "Long Lists" by adding a max-height to the container. However, when you click on the drop down the list starts at the bottom and not the top?

How do I force the list to start at the top when click on a select?

Heres a link to the site https://preto.wpengine.com

If you scroll down the page to Book a Table and click either the location or no. of people selects you'll see they open and start at the bottom and up have to scroll up the list instead of down.

jonny-harte
  • 357
  • 1
  • 7
  • 16
  • I have the same form on this page and it's ok.I think it has something to do with how far down the page the form is. If i move the form to the top of the home page it is also ok. https://preto.wpengine.com/book-a-table – jonny-harte Nov 23 '17 at 10:44
  • I'm unable to reproduce the problem, sorry... – Puka Nov 23 '17 at 11:08
  • so when you click select location you see camden and can scroll down the list? – jonny-harte Nov 23 '17 at 12:42
  • Yep, exactly :) I'm on Firefox Quantum - Mac OS – Puka Nov 23 '17 at 13:07
  • Thats weird, its at the bottom on firefox for me as well. A few others have tested it and all the same. It jumps down to the bottom option when you open them on the homepage... – jonny-harte Nov 23 '17 at 13:59

1 Answers1

0

The problem is that your select options fields are opening above the select fields naturally because they have room to go that way. SelectBoxIt must be using this to generate the direction of the elements. If you open the console and click on <section id="book-a-table"></section> and drag the node up the page (above header) you will be able to see it working correctly. This is because the options now have room to open downwards.

Unfortunately, from what I've read there is no good way to force the direction a select field opens in that works in all browsers as you can see here.

So what I might recommend is trying a bit of a workaround. Try adding a large height to the parent of the select fields like g-form-wrapper. Big enough to allow them to drop down. And then add a smaller height to the parent of that element book-a-table and set it's overflow to hidden to compensate.

Hope it helps!

Derek Nolan
  • 744
  • 5
  • 11