1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Select List Overflow Problems

imput items cut off

         

ergophobe

5:06 am on Jul 11, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I have two problems with select lists.

In brief, the box is styled so it is fairly small, but some of the options are quite long. Firebug reports the longest option as 412px, whereas the select box is 146px (these are not specified in pixels so those widths change with text size, but you get the idea).

Anway, there are two issues.

1. One is the well-known issue with IE where it only shows 146px and so it cuts of the text on pretty much all options

2. Firefox and Chrome expand the list, but if the browser window is full sized, the select list flows outside the viewport and the text is cut off, but even worse the scrollbar is cut off. This is because the select box is near the righthand edge of the page and always expands to the right (it would be fine if it were right-justified to the viewport... arggghhh why isn't this so? Every expandable menu in the Windows UI works that way).

I've seen a JQuery based solution for #1, but nothing for #2. It appears that I would have to use Javascript and when the select list is active, make it wider (in IE) and apply some sort of negative margin so it expands to the left instead of expanding to the right.

Ideally, I'd like a pure CSS, non-javascript solution, but could settle for a JS solution if anyone has any ideas.

Major_Payne

11:39 pm on Jul 13, 2010 (gmt 0)



Without see any code, not sure if this will help or not. Try using one of these CSS properties:

overflow: auto;

overflow: scroll;

ergophobe

3:41 pm on Jul 14, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



No, it's not an overflow problem.

It turns out you can solve this for Gecko browsers and Opera by setting
direction: rtl;

But that doesn't work on webkit browsers or IE.

Here's some sample code 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select Expansion Test</title>
<style type="text/css">
  select {width:160px;}
  div.container {width:100%;}
  div.sidebar {
    width:200px;
    float:right;
  }
</style>
</head>
<body>
<div class="container">
 <div class="sidebar">
  <form id="form1" name="form1" method="post" action="">
   <select name="test1" id="test1">
    <option value="1">Mary</option>
    <option value="2">Mary had a little lamb</option>
    <option>Mary had a little lamb whose fleece was white as snow</option>
   </select>
  </form>
 </div>
 <p>Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb.</p>
</div>
</body>
</html>

Major_Payne

11:15 pm on Jul 14, 2010 (gmt 0)



First, you are including a character set tag or was it omitted by mistake here?

ergophobe

12:21 am on Jul 15, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Omitted here just b/c it's not relevant. I only include the DOCTYPE to show that it shouldn't be rendering in quirks

You could see what I'm talking about with just the bare bones - <html> tag and inline CSS. The only things that really matter are the widths, the float and the long option.

enigma1

9:51 am on Jul 15, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



For the 1st issue without js the closest I could think of for IE is to use the focus on the select and setup the width to auto like

select {width:160px;}
select:focus {width:auto;}

and that affects the other browsers too.

You could eliminate the select though and use a scrollable div with few lines, if you want just css and that should be consistent with all browsers.

ergophobe

3:37 pm on Jul 15, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Thanks enigma1

That's not bad. It breaks the layout a bit, but I think if I use an onchange event to return it to it's original state, then the layout will be okay and the JS is just an aesthetic thing, meaning it's still usable without, just uglier (and I'll use it on IE only with conditional comments b/c it doesn't change anything in webkit and it creates an odd effect in Gecko where the select box expands to the right and the options to the left).

Of course, this still leaves the fundamental issue, which after the select:focus fix is now shared across IE and Webkit browsers.

>>could eliminate the select

So this is for an off-the-shelf shopping cart. Getting in there and changing the form itself might be a bit messy.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026