gpt4 book ai didi

css - RichFaces 选择列表 : Fluid scrollable list/column

转载 作者:行者123 更新时间:2023-11-28 07:05:04 25 4
gpt4 key购买 nike

瞄准

我想要这个:Aim Pic .

初始情况

在以下示例代码中,使用了 rich:picklist:

<rich:pickList id="userAuthoritiesPickList" value="#{securityBean.selectedUserAuthorities}"
sourceCaption="sourceCaption" targetCaption="targetCaption" style="background:green" orderable="false"
addText="addText" addAllText="addAllText" removeText="removeText" removeAllText="removeAllText">
<f:selectItems value="#{securityBean.authorities}" var="authority" itemValue="#{authority}"
itemLabel="#{securityBean.getLocalizedRoleName(authority.authority)}" />
</rich:pickList>

我得到以下结果:resultPic

观察:

  1. sourceList 有一个滚动条,因为它的元素太大。
  2. 右边有足够的空间

目标

  1. 我希望 pickList 使用右侧的空闲空间,以便 sourceList 中的滚动条变小或者甚至不需要。 pickList 例如应该使用 70% 的空间。
  2. 当调整浏览器窗口大小时,pickList(和 sourceList)的宽度应该调整,以便 sourceLists 中的滚动条再次变得必要。

我尝试了什么

使用了这些资源:

  • 查看页面宽度 chrome devTools
  • 组件引用
  • java文档

注意到:

  • rich:pickList width 的唯一标记属性是 listWidth,它只允许您定义列表元素的像素宽度(不可能是百分比)
  • 如果未定义 listWidth,则 listWidth 为 width: 200px。使用

    .rf-pick-lst-scrl{ width: initial !important; }

    我可以把它改成这个。sourceList 现在更大了,但是当我调整浏览器窗口大小时,sourceList 宽度没有调整。相反,整个页面都有一个滚动条。

  • 我尝试将多个 styleClasses 的宽度设置为百分比。像例如

    .rf-pick-src{ width: 50% }

    但这只是 sourceList 的一半而不是 pickList,因此按钮的空间只会加宽。

总结:那么如何获得行为:SourceList(pickList)应该使用freeSpace。如果还不够 -> 调整 sourceList 的大小? (就像在表格中一样,您可以使用 table-layout: fixed; 做一些事情)。由于使用 chrome devTools table-layout 手动更改页面,我得到了我想要的。但是 table 是由 rich:pickList 生成的,我无法为它们设置 css 属性(没有 id,class..):

我想要它像这篇文章开头的Aim Pic

最佳答案

你不需要 id 或 class 来使用 CSS,尤其是当你知道布局是静态的时候:

.rf-pick > table,
.rf-pick > table > tbody > tr > td:nth-child(3) > table {
width: 100%;
table-layout: fixed;
}

.rf-pick > table > tbody > tr > td:nth-child(2) {
width: 30px; /* buttons */
}

将 listWidth 设置为“auto”(“100%”也可以,我必须修改描述)

关于css - RichFaces 选择列表 : Fluid scrollable list/column,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33009848/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com