Clever Geek Handbook

Selecting text after selecting all values ​​in the list

Selecting all values ​​in the List (with ctrl + A) truncates the text. I need full text without truncation. This is a jsfiddle example . I've tried different combinations, just couldn't figure out why this is happening or fix it.

HTML code:

<select class="leftList" 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>

CSS

.leftList {
    width: 115px;
    overflow-x: scroll;
    height:200px;
}
+3


source to share


5 answers


if it allows you to wrap it with a div, you can give the div a "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>


this way the total width remains 115px and you have an inner scroll for the options.
Example: http://jsfiddle.net/729nX/42/

+2


source


I am checking the link you provide, but there seems to be no problem when changing the max-width property to

max-width:215px;


Maybe my question is wrong?

0


source


This is because you have given max-width

.

Remove max-width: 115px;

from .leftList

.

Updated violin.

0


source


Setting parameter width ...

option {
    width: 200px;
}

http://jsfiddle.net/rLcb7813/

0


source


there is a way you can do this ... you need to change the color of the selected text or change the background color <select>

Jus check this out: http://jsfiddle.net/rut2/729nX/41/

0


source






More articles:


All Articles