On the menu bar I have a list box.
When the list box is set for single selection, the drop down list of selections, drop below the division.
When I include the "multiple" option on the list box, the list box expands the <div> to the size of the list box's available options.
How can I prevent this from happening? Below is my HTML and css code.
Expand|Select|Wrap|Line Numbers
- the css code
- #MenuBar {
- position: fixed;
- white-space: nowrap;
- top: 0px;
- left: 1px;
- width: 99%;
- background-color: #CCFFFF;
- color: black;
- border: #0000FF solid 1px;
- padding-left: 10px;
- z-index: 150;
- }
- the HTML code
- <div id="MenuBar" nowrap="nowrap">
- Soil Samples
- Job#
- <input
- type="text"
- id="JOBID"
- name="JOBID"
- size="7"
- maxlength="6"
- />
-
- <input
- type="button"
- value="Find Borings"
- onclick="getBoringData();"
- />
- Select Boring#
- <select
- id="BORING"
- name="BORING"
- multiple="multiple"
- >
- <option value="all" selected>Select</option>
- <option value="1" selected>1</option>
- <option value="2" selected>2</option>
- <option value="3" selected>3</option>
- <option value="4" selected>4</option>
- <option value="5" selected>5</option>
- <option value="6" selected>6</option>
- <option value="7" selected>7</option>
- <option value="8" selected>8</option>
- <option value="9" selected>9</option>
- <option value="10" selected>10</option>
- <option value="11" selected>11</option>
- <option value="12" selected>12</option>
- <option value="13" selected>13</option>
- <option value="14" selected>14</option>
- </select>
- </div>