我有一个动态填充的基于 div 的下拉菜单，当客户在其中放置大量条目时，它会延伸到屏幕末尾，隐藏较低的条目。它位于一组数据输入行(td 元素)的一列上，因此可用空间因输入的行而异。
不幸的是，这是我继承的一个应用程序，没有任何帮助，也没有真正的技能来维护，所以我会很感激“像我五岁一样解释”。另外，对于文字墙，我深表歉意。
通过广泛的谷歌搜索和对应用程序中其他代码的检查，我相信 optionsCollection 可以解决这个特定问题，但我需要在所选值发生变化时触发一个函数来设置其他数据，但还没有找到解决方法与 optionsCollection。
不幸的是，这个东西太大了，无法发布，如果我试图将问题打包成一个独立的问题，我可能会破坏它，所以这是我认为的相关代码。
分区
<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, 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;
}
我搜索过的几个网站建议使用 overflow:auto 并设置大小，但这似乎没有任何改变。也许我搞砸了设置大小？但在我看来，固定大小无济于事，因为可用空间取决于输入的行。我发现 overflow:scroll 给了我水平和垂直滚动条，但滚动条只是随着 div 延伸到屏幕末端。我已经考虑过尝试弄清楚还剩下多少空间，并使 div 看起来足够高以适合，但我认为那会很丑陋。如果必须的话，我会去那里。
任何提示、帮助和想法的指针都将不胜感激。谢谢。
最佳答案
这是编写扩展小部件时的常见问题。
你只需要
max-height；overflow-y: auto让它只在需要的时候添加滚动条；top位置加上元素的height是否高于<>height >viewport(窗口可见区域)； 看看 jsFiddle example 使用 jQuery 制作(为了方便)。调整窗口大小，看看溢出的元素会发生什么。
或者只运行下面的代码片段:
$(".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>
关于javascript - 如何使用 JavaScript 和 CSS 获得基于 div 的下拉菜单以获得滚动条而不是延伸到屏幕末尾？ Struts也参与其中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30064868/
我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚
我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数
我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？ 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类
导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵
相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声
HashMap中为什么引入红黑树，而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道，在JDK1.8以及之前，针对HashMap有什么不同。JDK1.7的时候，HashMap的底层实现是数组+链表JDK1.8的时候，HashMap的底层实现是数组+链表+红黑树我们要思考一个问题，为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好？？？2.链表上述的截图其实就是链表的结构，我们来看下链表的增删改查的时间复杂度增：因为链表不是线性结构，所以每次添加的时候，只需要移动一个节点，所以可以理解为复杂度是N(1)删：算法时间复杂度跟增保持一致查：既然是非线性结构，所以查询某一个节点的时候
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
需求：要创建虚拟机，就需要给他提供一个虚拟的磁盘，我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式：qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令，基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机，另外在创建虚拟机之前，提前打开vnc客户端，在创建虚拟机的时候，通过vnc
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我正在寻找用于Rails的优质管理插件。似乎大多数现有的插件/gem(例如“restful_authentication”、“acts_as_authenticated”)都围绕着self注册等展开。但是，我正在寻找一种功能齐全的基于管理/管理角色的解决方案——但不是简单地附加到另一个非基于角色的解决方案。如果我找不到，我想我会自己动手......只是不想重新发明轮子。 最佳答案 RyanBates最近做了两个关于授权的railscast(注意身份验证和授权之间的区别；身份验证检查用户是否如她所说的那样，授权检查用户是否有权访问资源