2016-08-31 18 views
0

У меня есть одна проблема в нескольких блоках выбора. У меня есть контейнер с фиксированным размером внутри контейнера. Я пишу несколько блоков выбора.Выберите несколько: проблема при выборе длинной опции

Значения параметров имеют длинные описательные данные. Поэтому мне нужно дать 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> 

ответ

1

здесь работает

.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 «s overflow-x вместо option s '
В любом случае, я предлагаю вам использовать некоторую библиотеку для создания всплывающих подсказок для получения дополнительной информации inst я бы предпочел hint.css

Смежные вопросы