I tried the following HTML and CSS that only show horizontal scroller. I can scroll vertically by the keyboard. How can I show vertical scroller so that the user can scroll by the mouse as well?
<html>
<header><title>This is title</title></header>
<style>
.myDiv {
max-width: auto !important;
max-height: auto !important;
overflow:scroll !important;
display: block;
width: 60% !important;
height: 60% !important;
border: 1px solid #ccc;
}
.mySelect {
width: auto !important;
height: auto !important;
min-width: auto !important;
border : none !important;
overflow: hidden !important;;
}
</style>
<body>
Hello world <br/>
<table>
<tr>
<td align="left"><input type='button' value='button'/></td>
</tr>
<td>
<table>
<tr>
<td>
<div id="divTest" class="myDiv">
<select class="mySelect" id="group" size="20" multiple="">
<option value="16c" title="test123">test123</option>
<option value="19c" title="course one">course one</option>
<option value="29c" title="Sample 1">Sample 1</option>
<option value="34c" title="test">test</option>
<option value="59c" title="Course with assignment and face to face activity">Course with assignment and face to face activityyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</option>
<option value="72c" title="hindi "subject"">hindi "subject"</option>
<option value="73c" title="maths "practical"">maths "practical"</option>
<option value="123c" title=" Inserting Todayäó»s Date"> Inserting Todayäó»s Date</option>
<option value="126c" title="Social Forum Course">Social Forum Course</option>
<option value="170c" title="Platinum 4000">Platinum 4000</option>
<option value="16c" title="test123">test123</option>
<option value="19c" title="course one">course one</option>
<option value="29c" title="Sample 1">Sample 1</option>
<option value="34c" title="test">test</option>
<option value="59c" title="Course with assignment and face to face activity">Course with assignment and face to face activity 000000000000000000000000000000000000000000000000000000000000000000</option>
<option value="72c" title="hindi "subject"">hindi "subject"</option>
<option value="73c" title="maths "practical"">maths "practical"</option>
<option value="123c" title=" Inserting Todayäó»s Date"> Inserting Todayäó»s Date</option>
<option value="126c" title="Social Forum Course">Social Forum Course</option>
<option value="170c" title="Platinum 4000">Platinum 4000</option>
<option value="16c" title="test123">test123</option>
<option value="19c" title="course one">course one</option>
<option value="29c" title="Sample 1">Sample 1</option>
<option value="34c" title="test">test</option>
<option value="59c" title="Course with assignment and face to face activity">Course with assignment and face to face activityyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</option>
<option value="72c" title="hindi "subject"">hindi "subject"</option>
<option value="73c" title="maths "practical"">maths "practical"</option>
<option value="123c" title=" Inserting Todayäó»s Date"> Inserting Todayäó»s Date</option>
<option value="126c" title="Social Forum Course">Social Forum Course</option>
<option value="170c" title="Platinum 4000">Platinum 4000</option>
<option value="16c" title="test123">test123</option>
<option value="19c" title="course one">course one</option>
<option value="29c" title="Sample 1">Sample 1</option>
<option value="34c" title="test">test</option>
<option value="59c" title="Course with assignment and face to face activity">Course with assignment and face to face activity 000000000000000000000000000000000000000000000000000000000000000000</option>
<option value="72c" title="hindi "subject"">hindi "subject"</option>
<option value="73c" title="maths "practical"">maths "practical"</option>
<option value="123c" title=" Inserting Todayäó»s Date"> Inserting Todayäó»s Date</option>
<option value="126c" title="Social Forum Course">Social Forum Course</option>
<option value="170c" title="Platinum 4000">Platinum 4000</option>
<option value="16c" title="test123">test123</option>
<option value="19c" title="course one">course one</option>
<option value="29c" title="Sample 1">Sample 1</option>
<option value="34c" title="test">test</option>
<option value="59c" title="Course with assignment and face to face activity">Course with assignment and face to face activityyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</option>
<option value="72c" title="hindi "subject"">hindi "subject"</option>
<option value="73c" title="maths "practical"">maths "practical"</option>
<option value="123c" title=" Inserting Todayäó»s Date"> Inserting Todayäó»s Date</option>
<option value="126c" title="Social Forum Course">Social Forum Course</option>
<option value="170c" title="Platinum 4000">Platinum 4000</option>
<option value="16c" title="test123">test123</option>
<option value="19c" title="course one">course one</option>
<option value="29c" title="Sample 1">Sample 1</option>
<option value="34c" title="test">test</option>
<option value="59c" title="Course with assignment and face to face activity">Course with assignment and face to face activity 000000000000000000000000000000000000000000000000000000000000000000</option>
</select>
</div>
</td>
</tr>
</table>
</td>
<tr>
</table>
</body>
</html>
you can replace all the content of the style tag with:
.mySelect {
max-width: 60%;
max-height:60%;
overflow: auto;
}