CSS Combo box dropdown position

1
votes

I searched the web but couldn't find a good answer for HTML/CSS designs:

  • I have a menubar docked to the right of my screen
  • The menu bar contains select elements (comboboxes) with a fixed width
  • Sometimes the content of those comboxes is too big to fit that fixed width

Here the current behavior I'm noticing:

  • in normal position, the choice is simply clipped and that's fine by me

  • in dropdown position, the dropdown 'box' isn't clipped but is aligned to the left side of the combobox; as a consequence it goes beyond the right side of the screen and part of it is simply unreadable

    example


What I would like to do is force the dropdown box to align with the right of its parent combobox.

Any way to do that in CSS - or even JS I guess but not the preferred solution...?

1
csscomboboxdrop-down-menu
If you remove all your styling, the browser dosent automaticly send it to the right? - Marco Johannesen
@Marco, just tested it on chrome and it's true. the dropdown will be outside the browser window and even outside the screen. - Andy

1 Answers

0
votes

you'll be out of luck here with pure css.
you could look for a javascript combobox though and style that with css.