0

Is there a way to place a scrollbar inside an html 'select' and 'option' area? I only want the scrollbar to appear when the dropdown menu is clicked. I have set max-height and overflow's appropriately (at least according to Google search result articles and Stackoverflow responses) but nothing seems to change. I do not want the max-height or height to effect the loaded size. 

<div class="medium-6 large-6 columns view-value1">
        <table id="period-picker">
            <tr>
                <td><button type="button" id="BtnPreviousPeriod" class="gray-button" onclick="previousPeriod()">«</button></td>
                <td>
                    <select id="TimePeriod" class="gray-button button dropdown" onchange="updatePeriodButtons()">
                            <option value="08-16-2014">Aug-16-2014</option>
                            <option value="08-01-2014">Aug-01-2014</option>
                            <option value="07-16-2014">Jul-16-2014</option>
                            <option value="07-01-2014">Jul-01-2014</option>
                            <option value="06-16-2014">Jun-16-2014</option>
                            <option value="06-01-2014">Jun-01-2014</option>
                            <option value="05-16-2014">May-16-2014</option>
                            <option value="05-01-2014">May-01-2014</option>
                            <option value="04-16-2014">Apr-16-2014</option>
                            <option value="04-01-2014">Apr-01-2014</option>
                    </select>
                </td>
                <td><button type="button" disabled id="BtnNextPeriod" class="gray-button" onclick="nextPeriod()">»</button></td>
            </tr>
        </table>
    </div>

is what I have so far. I eventually want to set it to where the scroll bar appears and only 5-8 options are shown before having to scroll down. does it have anything to do with it being a table row?

user2403316
  • 178
  • 1
  • 12
  • possible duplicate of [How can I limit the visible options in an HTML – Anthony Oct 02 '14 at 18:17

1 Answers1

0

I found this on StackOverflow. As mentionned here: https://stackoverflow.com/a/8788691/3956967 you can't do that with a select element but you can use javascript to replace it with a fake select and dropdown.

Community
  • 1
  • 1
Berthy
  • 358
  • 2
  • 8
  • it works well, along with another JFiddle example, but when I apply these similar changes, The absolute positioning pushes all other items up and down. I may have to just start fiddling with that – user2403316 Oct 24 '14 at 14:25