如何使用基于div的下拉列表获取滚动条而不是使用JavaScript和CSS延伸到屏幕末尾？ Struts也参与其中

我有一个动态填充的基于div的下拉列表,当客户在其中放入大量条目时,它会延伸到屏幕末尾,隐藏较低的条目.它位于一组数据输入行(td元素)中的一列上,因此可用空间因输入的行而异.

不幸的是,这是一个我继承的应用程序,没有任何帮助,并且没有真正的技能设置来维护,所以我会感激一点’解释,就像我是五个’.此外,我为文本墙道歉.

从广泛的谷歌搜索和应用程序中的其他代码检查我相信optionsCollection将解决这个特定的问题,但我需要触发一个函数来设置其他数据时所选的值更改,并没有找到一种方法来使用optionsCollection .

不幸的是,这个东西太大而不能发布,如果我试图将问题打包成独立的话,我可能会破坏它,所以这就是我认为的相关代码.

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++;
}
%>

通过单击字段触发下拉列表的位置

<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和onChange与外观无关.
用于显示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,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;
}

我搜索的几个网站建议溢出：自动和设置大小,但这似乎没有改变任何东西.也许我搞砸了设定尺寸？但在我看来,固定大小无济于事,因为可用空间取决于输入的行.我发现overflow：scroll给了我水平和垂直滚动条,但是条形图只是在屏幕末端的div处延伸.我已经考虑过要弄清楚剩下多少空间,并让div看起来足够高,但我认为那会很难看.如果我不得不去,我会去那里.

任何提示,帮助,指点的想法将非常感激.谢谢.

解决方法

这是编写扩展小部件时的常见问题.

你只需要

>为元素设置所需的最大高度;
> set overflow-y：auto指示仅在需要时添加滚动条;
>使用javascript,计算元素的顶部位置加上元素的高度是否高于视口的高度(窗口的可见区域);
>如果它溢出,那么做点什么.通常,通常的行为是反转下拉的方向,使其从父元素的底部开始,向顶部增长.

看看使用jQuery制作的jsFiddle example(为方便起见).调整窗口大小,看看溢出元素会发生什么.

或者只运行以下代码段：

$(".dropdown li").on('mouseenter mouseleave',function(e) {
  var submenu = $('ul:first',this);
  var submenutop = submenu.offset().top;
  var submenuHeight = submenu.height();
  var viewportHeight = $(window).height();

  var isOverflowing = (submenutop + submenuHeight > viewportHeight);

  if (isOverflowing) {
    submenu.css("top",$(this).height() - submenuHeight);
  } else {
    submenu.css("top",0);
  }
});

* {
  Box-sizing: border-Box;
}

body {
  background: dodgerBlue;
}

.dropdown,.dropdown li,.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown {
  width: 100%;
}

.dropdown ul {
  position: absolute;
  top: 100%;
  left: 100%;
  visibility: hidden;
  display: none;
  z-index: 1;
  width: 200px;
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}

.dropdown li {
  position: relative;
  float: left;
  clear: both;
}

.dropdown li:hover {
  z-index: 910;
}

.dropdown ul:hover,.dropdown li:hover>ul,.dropdown a:hover+ul,.dropdown a:focus+ul {
  visibility: visible;
  display: block;
}

.dropdown a {
  display: block;
  background: #000;
  color: #fff;
  padding: 5px 20px;
  text-decoration: none;
}

.dropdown ul li {
  width: 100%;
}

.dropdown li:hover a {
  background: #333;
}

.dropdown li a:focus,.dropdown li a:hover {
  background: #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul class="dropdown">
  <li><a href="#">Link 1</a>

    <ul>
      <li><a href="#">Link 1</a>

      </li>
      <li><a href="#">Link 2</a>

      </li>
      <li><a href="#">Link 3</a>

      </li>
      <li><a href="#">Link 4</a>

      </li>
      <li><a href="#">Link 5</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Link 2</a>

    <ul>
      <li><a href="#">Link 1</a>

      </li>
      <li><a href="#">Link 2</a>

      </li>
      <li><a href="#">Link 3</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Link 3</a>

    <ul>
      <li><a href="#">Link 1</a>

      </li>
      <li><a href="#">Link 2</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Link 4</a>

    <ul>
      <li><a href="#">Link 1</a>

      </li>
      <li><a href="#">Link 2</a>

      </li>
      <li><a href="#">Link 3</a>

      </li>
      <li><a href="#">Link 4</a>

      </li>
      <li><a href="#">Link 5</a>

      </li>
      <li><a href="#">Link 6</a>

      </li>
      <li><a href="#">Link 7</a>

      </li>
      <li><a href="#">Link 8</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Link 5</a>

    <ul>
      <li><a href="#">Link 1</a>

      </li>
      <li><a href="#">Link 2</a>

      </li>
      <li><a href="#">Link 3</a>

      </li>
      <li><a href="#">Link 4</a>

      </li>
      <li><a href="#">Link 5</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Link 6</a>

    <ul>
      <li><a href="#">Link 1</a>

      </li>
      <li><a href="#">Link 2</a>

      </li>
      <li><a href="#">Link 3</a>

      </li>
      <li><a href="#">Link 4</a>

      </li>
      <li><a href="#">Link 5</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Link 7</a>

    <ul>
      <li><a href="#">Link 1</a>

      </li>
      <li><a href="#">Link 2</a>

      </li>
      <li><a href="#">Link 3</a>

      </li>
      <li><a href="#">Link 4</a>

      </li>
      <li><a href="#">Link 5</a>

      </li>
      <li><a href="#">Link 6</a>

      </li>
      <li><a href="#">Link 7</a>

      </li>
      <li><a href="#">Link 8</a>

      </li>
    </ul>
  </li>
</ul>

如何使用基于div的下拉列表获取滚动条而不是使用JavaScript和CSS延伸到屏幕末尾？ Struts也参与其中

解决方法

相关推荐