CODEWITHSUNDEEP
htmlcssselectmultiple-select
s_k_t
s_k_t

Reputation: 739

Select Multiple : Issue on selecting long option

I have one issue in multiple selection box. I have a container of fixed size inside the container I am writing a multiple selection box.

The option values has long descriptive data. So I need to give overflow-x : auto to select any data and scroll horizontally to read the content .

when I select any data and try to scroll horizontally,to read the whole content, the other part of information which should be visible is not visible(which was not visible as we need to scroll).

Please paste this sample code and select any data and try to horizontally scroll and you see the information is partially selected.

  <!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>

Upvotes: 0

Views: 1545

Answers (1)

bobD
bobD

Reputation: 1077

here it's working

.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>

I guess your problem was that the select box didn't have any fixed width and you was changing the select's overflow-x instead of options'
anyway I suggest you to use some library to make tooltips for more info instead of putting a long inside of a option , I'd prefer hint.css

Upvotes: 1

Related Questions