HTML select dropdown going off screen

Question

Considering the following code:

<div style="float: left;">
  <select style="width: 160px;">
    <option>asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option>
    <option>1</option>
    <option>2</option>
  </select>
</div>

<div style="float: right;">
  <select style="width: 160px;">
    <option>asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option>
    <option>1</option>
    <option>2</option>
  </select>
</div>

When opening the right selectbox, the contents of the dropdown go off the screen. Also when the list would be longer, you would not be able to scroll through the list (only with mousewheel and keyboard, but the scrollbar is invisible)

Is there a fix for this? Ofcourse you could set a width / max-width on the options, but that would cut off the contents of the option element. Any suggestions?

Answer 1

I think you mean the right side of the select box is not visible so the user cannot use the scroll-bar.

You have 2 potential options that I can see outside of changing to a JavaScript solution, the first is to repostition the elements to allow for longer content.

The second is to specify the width of the element to a percentage value as below, the downside is the width of the select element will be dynamically changed and you will lose some design control.

<div style="float: right;">
  <select style="width:100%">
    <option width="">asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option>
            <option>1</option>
            <option>2</option>
        </select>
    </div>

I did a quick test in Chrome and Firefox, you can use what ever percentage value you want to, I tested on 100% and 50%, on 50% - depending on the nature of the content or any place holder values like "--SELECT--", the element will only show half the length of the longest item.

I would look into most likely look into jQuery plugins or other JavaScripts for a better solution depending on my needs at the time.

Answer 2

I ran into this issue recently (with Firefox) - the open select menu would go beyond the bounds of the desktop screen.

My solution was to copy the option content into the title attribute. And also update the select title on change, so hovering over the option or select will show a tooltip within the browser window - demo.

var $select = $('select');

$select
    .on('change', function () {
        var $this = $(this),
            // use replace to remove extra white (if desired)
            txt = $this.find('option:selected').text().replace(/\s+/g, ' ');
        // add title to select
        $this.attr('title', txt);
    })
    .change()
    .find('option').each(function () {
        var $this = $(this);
        // add title to each option, so it works on hover
        $this.attr('title', $this.text());
    });