I have a div-based popup menu that lasts until the end of the screen when the client puts a lot of records on it, hiding the bottom records. It is located in one column in the set of data entry lines (td-elements), so the available space varies depending on which row is entered.
Unfortunately, this application that I have inherited does not have any help and actually does not have a set of skills to maintain, so I would rate a little “explain as if I were five”. Also, my apologies for the wall of text.
From extensive Googling and studying other code in the application, I believe that optionsCollection will solve this particular problem, but I need to disable the function to set other data when the selected value changes and not find a way to do that with optionsCollection.
Unfortunately, this thing is simply too large to publish, and I would most likely distort it if I tried to compose the problem offline, so this is what I think is appropriate code.
div
<div class="empform"> <html:form action="/processBlank"> <div id="divJobClass" style="visibility: hidden; position: absolute; height="50px" border-color: #fff; border-style:solid; border-width: 1px; background: white; opacity: 1"> <table id="tableJobClass" cellspacing="0" style="border-color: #9090ff; border-style:solid; border-width:1px;" cellpadding="0"> <% ctr = 0; for (JobClassVO jc : jcList) { // href="setJC(<%=jc.getGuid()% >, '< %=jc.getJcIdDesc()% >')" %> <tr><td><input style="border: none; background: white" type="text" id="jc<%=ctr%>" size="50" value="<%=jc.getJcIdDesc()%>" readonly="readonly" onclick="setJC(<%=jc.getGuid()%>, '<%=jc.getJcIdDesc()%>', <%=ctr%>)" onkeydown='jcListCheck(event);'></td></tr><% ctr++; } %>
If the popup menu is launched by clicking the field
<td> <html:hidden name="erfEmployee" property="jcGUIDString" indexed="true"/> <html:text name="erfEmployee" property="jcId" indexed="true" size="8" maxlength="25" onblur='<%= "isLastRow('JobClass', " + count + ");" %>' onclick='<%= "showJcList(" + count + ");" %>' onkeydown='<%= "jcCheck(event," + count + ");" %>' onchange='<%= "verifyHoursClass(" + count + ");" %>' readonly="true" /> </td>
isLastRow, jcCheck and onChange are not related to appearance. The functions used to display the div,
function showJcList(index) { var fld = elem("erfEmployee[" + index + "].erfEeSsnFormatted"); if (fld.value == "") return; var div = elem_("divJobClass"); jcGuidTarget = elem("erfEmployee["+index+"].jcGUIDString"); jcIdTarget = elem("erfEmployee["+index+"].jcId"); showList(jcIdTarget, div, jcGuidTarget); focusSelected("jc", null, <%=jcList.size()-1%>); } function showList(idTarget, div, guidTarget) { ddDiv = div; if (ddDiv.style.visibility == "visible") { ddDiv.style.visibility = "hidden"; return; } var iTop = 0, oNode = idTarget, iLeft = 0; while(oNode.tagName != "BODY" && oNode.tagName != "HTML") { iTop += oNode.offsetTop; oNode = oNode.offsetParent; } oNode = idTarget; while(oNode.tagName != "BODY" && oNode.tagName != "HTML") { iLeft += oNode.offsetLeft; oNode = oNode.offsetParent; } ddDiv.style.left = "" + iLeft + "px"; ddDiv.style.top = "" + (iTop + idTarget.offsetHeight) + "px"; ddDiv.style.visibility = "visible"; ddIdTarget = idTarget; ddGuidTarget = guidTarget; }
A few sites I was looking for suggested overflowing: auto and sizing, but that didn't seem to change anything. Maybe I messed up the size setting? But it seems to me that a fixed size will not help, since the available space depends on which line is entered. I found that overflow: scrolling gave me horizontal and vertical scroll bars, but the bars just expand with the div right after the screen ends. I thought about trying to figure out how much space was left and make the div tall enough to fit, but I think that would be ugly. I will go there if necessary, though.
Any advice, help, pointers to ideas would be greatly appreciated. Thanks.