Geek Answers Handbook

CSS or JS for selection does not exit the screen to the right

If there is a selection element in the right part of the browser window (in other words, a drop-down list) and the width setting is less than the parameter texts are actually used, then clicking the drop-down list to expand it will display the text of some parameters outside the browser window. If the browser is maximized, this means that not all text is visible.

Html demo:

<html> <head> </head> <body style="text-align: right;"> <select style='width: 100px;'> <option> Long, long (quite long) text </option> </select> </body> </html>

So how to avoid this? Can I set some css property so that the advanced options match the right side of the window and flow?

Or do I need to use some js library for custom combooxes / drop down lists?

Thanks!

+4
source share
2 answers
 <html> <head> </head> <body style="text-align: right;"> <select style='width: 100px;' dir="rtl"> <option> Long, long (quite long) text </option> </select> </body> </html>

The key is dir = "rtl"

+3
source

Sexy Combo (jQuery plugin, http://code.google.com/p/sexy-combo/ ) can be modified using css to allow the box to move left. The changes depend on the chosen topic, but with the default "sexual" theme, here is the guide. First determine the width of the collapsed selector and the width of the advanced selector (I chose 100px and 200px). Then make the following changes to the "sexy" skin css file:

 div.sexy { width: 100px; } /* coll. width */ div.sexy input { width: 83px; } /* coll. width - icon width, (100 - 17) */ div.sexy div.icon { left: 100px; } /* coll. width */ div.sexy div.list-wrapper { left: -100px; /* coll. width - exp. width, (100 - 200) */ width: 200px; /* exp. width */ }

You want the default stream to be right, instead set the left property of "div.list-wrapper" to 0px.

I don't know if this is more or less elegant than with other combo plugins.

Advantages: (over Tony Joyce's answer) When folding, the first part of the line is displayed, not the last. In addition, this is really a combo box, and allows the user to enter what he is looking for. Supports ajax if necessary.

Disadvantages: Depending on JS, jQuery and Sexy Combo. Slow down. Does not use the os theme, i.e. It won’t look like a Mac OS style popup menu on such a computer, but it will look the same at all.

0
source

More articles:


All Articles