HTML select truncates text on click (using Google Chrome)

Question

I'm trying to create a simple select element.

The options' length isn't known in advance, and depend on the user's input.

The code I'm currently using is:

<html>
<head>
</head>
<body>
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td valign="top" width="325">
                    <select multiple="" size="10" style="overflow-x:auto; overflow-y:auto; width:320px;">
                        <option value="a1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
                        <option value="b1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

I'd like the select element to have a fixed width, and then when long lines are entered the user should be able to scroll.

The Problem

Using the current code truncates the option's text when I select it (number of 'a's is equal to number of 'b's):

enter image description here

Does anyone know how to fix the truncation when selecting an option?

@Pangloss I edited the question (last line). I hope it's clearer now. — Paz, Jul 19 '15 at 14:35
What browsers have you tested in? Where is it not working? Can you post a fiddle or something where it is reproducible? The code you pasted is working for me so I think the problem is elsewhere or a different browser than I'm using. — dmeglio, Jul 19 '15 at 14:37
Are you looking for [**this**](http://jsfiddle.net/60v2ec9h/)? — Stickers, Jul 19 '15 at 14:45
@Pangloss I'd like to have a horizontal scroll bar, and not just an ellipsis. — Paz, Jul 19 '15 at 14:51

jaunt · Answer 1 · 2015-07-19T15:16:37.977

The option tag inherits the parent select tag's width. This means that by defining the selects width as 325px, you are defining each of the option's width as 325px too. I have no idea why it only applies to the selected option, I'm looking into it.

You could create a wrapper element and apply the styling of the select tag to the wrapper. Like so:

table{
  border:0;
  width:100%;
  margin:0;
  padding:0;
}
.wrapper{
  overflow:auto; 
  width:320px;
  height: calc(18px * 3); /*Option height * (select size+1)*/
  vertical-align:top;
  border:1px solid grey;
}
select{
  border:0;
  height:calc(100% - 2px);
  overflow-y:visible;
}

<table>
  <tbody>
    <tr>
      <td>
        <div class="wrapper">
          <select multiple size="2">
            <option value="a1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
            <option value="b1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
          </select>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Although as you can see, this hides the vertical scroll bar off screen so it's not a perfect fix. I'll update my answer if I find another solution.

Also, you may have noticed I used the corresponding CSS properties instead of attributes for the table and td tags: this is more approved nowadays but your method was fine so no harm done if you revert it.

score 0 · Answer 2 · answered Jul 19 '15 at 14:44

0

Increase the width of select box. E.g.

<html>
<head>
</head>
<body>
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td valign="top" width="325">
                    <select multiple="" size="10" style="overflow-x:auto; overflow-y:auto; width:820px;">
                        <option value="a1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
                        <option value="b1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

answered Jul 19 '15 at 14:44

hyperkittie

641
6
16

I don't know the width in advance. – Paz Jul 19 '15 at 14:48
Would this be useful to derive the width http://stackoverflow.com/questions/10585014/jquery-get-pixel-width-of-option-in-a-select-list – hyperkittie Jul 19 '15 at 14:49
I was hoping this could be done in chrome without the need of heavy machinery such as jQuery. – Paz Jul 19 '15 at 14:53

score 0 · Answer 3 · answered Jul 19 '15 at 17:35

Or you can hide select and create selectbox in div:

$('.opt').on('click', function(e)
{
 var opt = $('#sel').find('option[value="' + $(this).attr('id') + '"]');
 if(opt.prop('selected') == true)
 {
  opt.prop('selected', false);
  $(this).removeClass('bg1');
 } 
 else
 {
  opt.prop('selected', 'selected');
  $(this).addClass('bg1');
 } 
});

table{
  border:0;
  width:100%;
  margin:0;
  padding:0;
}
select {
 width:320px;
 overflow:auto;
}
.wrapper{
  overflow:auto; 
  width:320px;
  line-height:1.1em;
  height:7.65em;
}
.opt {
 white-space:pre;
 width:auto;
}
.bg1 {
 background-color:#99d
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
          <select id="sel" multiple size="7">
            <option value="a1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
            <option value="b1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b3">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b4">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b5">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b6">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b7">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>            
            <option value="b8">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
            <option value="b9">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
            <option value="b10">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
          </select>
      </td>
    </tr>
    <tr>
      <td>
        <div class="wrapper">
            <div class="opt" id="a1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>            
            <div class="opt" id="b1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>            
            <div class="opt" id="b2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>            
            <div class="opt" id="b3">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>            
            <div class="opt" id="b4">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>            
            <div class="opt" id="b5">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>            
            <div class="opt" id="b6">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>            
            <div class="opt" id="b7">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
            <div class="opt" id="b8">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
            <div class="opt" id="b9">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
            <div class="opt" id="b10">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

score 0 · Answer 4 · edited Jun 19 '20 at 13:50

0

I had the same issue. I added the following style to each option tag to avoid the truncate.

width: fit-content;

edited Jun 19 '20 at 13:50

Olaia

2,172
25
27

answered Jun 19 '20 at 09:24

Elme

1
1

HTML select truncates text on click (using Google Chrome)

4 Answers4

Linked