How do you stop a dropdown menu from going up?

Question

I have a dropdown menu that\'s towards the top of the page for most screen sizes, but on smaller screens, such as a laptop, the menu is in the middle of the screen, and beca

Answer 1

As it's an element left to the browser to render, no, it's not possible (at least not as far as standards are concerned).

Your best option is to use an HTML substitute for the dropdown menu - this can be achieved with CSS and Javascript, though multiple javascript/jQuery libraries alread exist to perform this task.

Answer 2

Drop-downs are rendered by the Browser/OS. You cannot control this type of behaviour using CSS or JavaScript.

Answer 3

The main issue is with IE. It seems that if you have a list of options and your currently selected option is not the first option, then the dropdown may become a "Dropup". To get around this issue you can add a line of javascript to move the selected item to the top of the list. You will need to trigger this code each time a new selection has been made. Also after the page has loaded for the first time. By keeping the selected option at the top of the list of options, IE only renders a dropdown. I'm not saying this solution is pretty, but it can be useful as a last resort. (you will need to save the code and script and load it into IE to really see it working).

$('select.dropdowntest').prepend($('select.dropdowntest option:selected'));
$('select.dropdowntest').on('change', function() {
  $('select.dropdowntest').prepend($('select.dropdowntest option:selected'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select class="dropdowntest">
  <option value="sv">Option 1</option>
  <option selected="selected" value="en">Option 2</option>
</select>