CODEWITHSUNDEEP
htmlcss
Paz
Paz

Reputation: 737

HTML select truncates text on click (using Google Chrome)

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

enter image description here

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

Upvotes: 2

Views: 736

Answers (4)

Elme
Elme

Reputation: 1

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

width: fit-content;

Upvotes: 0

Čamo
Čamo

Reputation: 4170

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>

Upvotes: 0

jaunt
jaunt

Reputation: 5079

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.

Upvotes: 1

hyperkittie
hyperkittie

Reputation: 661

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>

Upvotes: 0

Related Questions