複数選択：長いオプションを選択する際の問題

複数の選択ボックスに1つの問題があります。私は複数の選択ボックスを書いているコンテナ内に固定サイズのコンテナを持っています。複数選択：長いオプションを選択する際の問題

オプション値には説明的な長いデータがあります。だから、overflow-x : autoにデータを選択して横にスクロールして内容を読む必要があります。

データを選択して横方向にスクロールしようとすると、コンテンツ全体を読むと表示されるはずの他の部分は表示されません（スクロールする必要があるため表示されません）。

このサンプルコードを貼り付け、任意のデータを選択して水平方向にスクロールして、情報が部分的に選択されていることを確認してください。ここ

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>My Application</title> 

    <style type="text/css"> 
    .test{ 
    width:300px; 
    } 
    select{ 
    width: 100%; 
    overflow-x: scroll; 
    } 
    </style> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script> 

</head> 
<body> 
<div class="test"> 
    <select name="myMultipleTest" id="myMultipleTest" multiple="multiple"> 
    <option value="A101">This is a sample long text which contains some information</option> 
    <option value="A102">This is a sample long text which contains some information, which might contain some information which is long in description</option></select> 

</div></body> 
</html>

出典

2016-08-31 s_k_t

それは

.test { 
 
    width: 300px; 
 
} 
 
select { 
 
    width: 200px; 
 
} 
 
select option { 
 
    width: 100%; 
 
    overflow-x: auto; 
 
}

<div class="test"> 
 
    <select name="myMultipleTest" id="myMultipleTest" multiple="multiple"> 
 
    <option value="A101">This is a sample long text which contains some information</option> 
 
    <option value="A102">This is a sample long text which contains some information, which might contain some information which is long in description</option> 
 
    </select> 
 
</div>

を働いている私はあなたの問題は選択ボックスが任意の一定の幅を持っていなかった、あなたが変更されたことだったと思いますselectさんoverflow-x代わりにoptionの '
とにかく私はあなたに情報をもっと知るためのツールチップを作るためにいくつかのライブラリを使うことを提案しますオプションの長い内部を置くのがうれしい、私は好きだろうhint.css

出典

2016-08-31 21:53:06 bobD

複数選択：長いオプションを選択する際の問題

答えて

関連する問題