• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1415
  • Last Modified:

Form drop down menu scrollbars

I have a drop down menu created by a loop with java. For some reason I cannot get it to add scrollbars to the drop down menu.

Here is my code:
table.menu
        {
                height: 30px;
                max-height: 30px;
                overflow: scroll;
                background:gray;
                position:absolute;
                visibility:hidden;
                opacity:.70;
                filter: alpha(opacity=70);
 
<table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                                <td onmouseover="showmenu()" onmouseout="hidemenu()">
                                
                                <input value="<%= ResponseBean.getDynamicPagesMainLinks1(0) %>" type="hidden" class="styled" id="MenuSelected_InputText" name="<%= com.servlets.DynamicPagesEditExecuteServlet.HTTP_REQUEST_FIELD_KEY_MAIN_LINKS_1 %>" onchange="setformsubmitMarker(this.form,"selectmenu");this.form.submit();">
                                <span class="nav1" id="MenuSelected_Text"><%= ResponseBean.getDynamicPagesMainLinks1(0) %></span><br />
                                <table class="menu" id="LinkChange">
                                                 <tr><td class="menu">To change this link, pick from the following pages.</td></tr>
                                   <% 
                                         for (int i=0; i<ResponseBean.getSizeOfDynamicLayouts(); i++)
                                         {
                                                 %>
                                                 <tr><td class="menu"><a href="javascript:MenuSelect('<%= ResponseBean.getDynamicLayoutsLinkName(i) %>')"><%= ResponseBean.getDynamicLayoutsLinkName(i) %></a></td></tr>
                
                                   <% } %>
                                                 <tr><td class="menu"><a href="../m1_dynamic_link_add.jsp">Add a link</a></td></tr>
                                        </table>
                                </td>
                        </tr>
        </table>

Open in new window

0
Shaye Larsen
Asked:
Shaye Larsen
1 Solution
 
smilyjfCommented:
I don't know Java so I could be totally wrong here but have you tried using a form element for a dropdown list instead of table rows?

For example:

<select name="menu" size="1">
    //start your loop here
    <option value="value">label</option>
    //end your loop here
 </select>

and replace the value and label with your dynamic ones
0
 
Lolly-InkCommented:
I got your code to work by changing the table to a div, removing the max-height declaration in the CSS, plus a bunch of other stuff. Works in IE7 and FF3.
Compare your code to my code carefully. I removed the ASP stuff, for testing purposes in HTML/JavaScript/CSS only.

<html>
<style>
   div.menu
	{
		height: 34px;
      overflow: -moz-scrollbars-vertical;
		overflow-y: scroll;
		background: gray;
		position:absolute;
		visibility:hidden;
		opacity:.70;
		filter: alpha(opacity=70);
   }
</style>
<script>
   function showmenu()
   {
      document.getElementById("LinkChange").style.visibility = "visible";
   }
 
   function hidemenu()
   {
      document.getElementById("LinkChange").style.visibility = "hidden";
   }
</script>
<body>
   <table cellpadding="0" cellspacing="0" border="0">
			<tr>
				<td onmouseover="showmenu()" onmouseout="hidemenu()">
				
	   			<input value="ResponseBean.getDynamicPagesMainLinks1(0)" type="hidden" class="styled" id="MenuSelected_InputText" name="HTTP_REQUEST_FIELD_KEY_MAIN_LINKS_1" onchange="setformsubmitMarker(this.form,'selectmenu');this.form.submit();">
				<span class="nav1" id="MenuSelected_Text">ResponseBean.getDynamicPagesMainLinks1(0)</span><br />
            <div class="menu" id="LinkChange">
                <div><span class="menu">To change this link, pick from the following pages.</span></div>
                <div><span class="menu"><a href="javascript:MenuSelect('Name1')">Name1</a></span></div>
                <div><span class="menu"><a href="javascript:MenuSelect('Name2')">Name2</a></span></div>
                <div><span class="menu"><a href="javascript:MenuSelect('Name3')">Name3</a></span></div>
                <div><span class="menu"><a href="javascript:MenuSelect('Name4')">Name4</a></span></div>
                <div><span class="menu"><a href="javascript:MenuSelect('Name5')">Name5</a></span></div>
                <div><span class="menu"><a href="javascript:MenuSelect('Name6')">Name6</a></span></div>
                <div><span class="menu"><a href="javascript:MenuSelect('Name7')">Name7</a></span></div>
                <div><span class="menu"><a href="javascript:MenuSelect('Name8')">Name8</a></span></div>
                <div><span class="menu"><a href="../m1_dynamic_link_add.jsp">Add&nbsp;a&nbsp;link</a></span></div>
            </div>
            </td>
			</tr>
   </table>
</body>
</html>

Open in new window

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now