Home/ Questions/Q 6634867
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T22:58:51+00:00

The problem I am currently facing is really hard to describe, but maybe you

  • 0

The problem I am currently facing is really hard to describe, but maybe you can the idea from the following screenshots. The setup is a select box (width limited via css) and some option elements inside. If one option’s width is greater than the width of the select box, the whole thing gets rendered like this by default:

Select box expanding to the right

And this is how I want it to be displayed (the red box being the options):

Select box expanding to the left

Any idea how I can achieve this?

EDIT: Here is a fiddle with the markup I am using: http://jsfiddle.net/dCmZ2/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t have much control over a browser’s render of a select box. Just think about mobile devices like the iPhone. Here the select list takes over half the phone screen and is custom rendered. If you want this level of control then you will need to roll your own custom select box. 

    div:hover ul { display: block; }
div ul { /* custom css for placement */ }
<div>
   <ul><li>1</li><li>1</li></ul>
</div>
    • 0