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 because of this, the dropdown list is going above the selector. I want a dropdown that will consistently go down, no matter where on the page it is. Is this at all possible?

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 because of this, the dropdown list is going above the selector. I want a dropdown that will consistently go down, no matter where on the page it is. Is this at all possible?

• javascript
• html
• css
• drop-down-menu
• selector

• 2 Post the markup, style, and JavaScript responsible for the behavior. – Stephen__T Commented Jun 4, 2012 at 20:20
• Your dropdown is too big. You should reduce the number of items, or find another way to do what you need. Long dropdown lists make for poor usability. – Kendall Frey Commented Jun 4, 2012 at 20:23

4 Answers 4

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

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.

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 bee 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./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>

You can edit the font size in the select which would change the browser's behavior

select {
   font-size: 15px;
}