Text Gets Cut When Using <Select>

Text gets cut when using select

Firstly remove the height: 23px; declaration.

Notice the the text is not cut anymore, however the elements have a greater height than what was needed.

To fix this, just change the padding to padding: 6px 10px;

FIDDLE

input,
select {
  box-sizing: content-box;
  width: 90%;
  padding: 6px 10px;
  font-family: TheBoldFont;
  font-size: 27px;
  color: #f26e7c;
  border: 4px solid black;
  border-radius: 12px;
}

<input type="text" value="xxxxxxx">

<select>
  <option selected value="xxxxxxxxx">xxxxxxxx</option>
</select>

HTML Select cutting text off

Turns out there's a simple fix (courtesy of Select box truncating text when body font size changed via javascript on document ready in IE 9):

$('select').append(' ');

Forces the select to be redrawn.

text getting cut after all values of list are selected

if it allow you to wrap it with a div, you can give the div the "leftList" class:

<div class="leftList">
    <select multiple size="10" >                                                    
       <option value="GPRS_Data333333L">GPRS_L(Bytes)</option>
        <option value="GPRS_&&&&&&&&&&&&&DL">GPRytes)</option>
        <option value="GPRS_Data_Volume_DL">GPRS_D_DL(Bytes)</option>
        <option value="GPRS_Data_Volume_DL">ol(Bytes)</option>
        <option value="GPRS_Data_Volume_DL">G_Volume_DL(Bytes)</option>
        <option value="GPRS_Data_Volume_DL">GPRS_Data_Volume_DL(Bytes)</option>
           <option value="GPRS_Data_Volume_DL">GPRS_Data_Volume)</option>
            <option value="GPRS_DL">GPRytes)</option>
    </select>    
</div>

that's way the total width stay 115px and you have a inner scroll for the options.

example: http://jsfiddle.net/729nX/42/

Select dropdown cutting text

Try adding this to your CSS file;

select {
  height: fit-content;
}

or if you can't use fit-content go with a fixed value

select {
  height: 100px; // adjust accordingly
}

I am guessing your height is being clipped

---

Related Topics