Question

目标

我想要这个：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

观察：

sourceList有一个滚动条，因为它的元素太大了。
右边有足够的空间

目标

我希望pickList使用右侧的空闲空间，以便sourceList中的滚动条变得更小或者甚至不需要。 pickList例如应该占用70％的空间。
当一个人调整浏览器窗口的大小时，pickList（和sourceList）应该调整宽度，以便sourceLists中的滚动条再次变为必要。

我尝试了什么

使用这些资源：

查看页面宽度chrome devTools
组件参考
java-doc的

注意到：

rich:pickList只有 width 的标记属性为 listWidth ，只允许您定义列表元素的像素宽度（百分比不可能）
如果未定义 listWidth ，则listWidth为width: 200px。使用

.rf-拾取LST-SCRL { width：initial！important; }

我能够将其更改为此。 sourceList现在更大，但是当我调整浏览器窗口大小时，sourceList宽度不会调整大小。相反，它会为整个页面添加一个滚动条。
我尝试将 width 设置为严重styleClasses的百分比。像例如

.rf挑选-SRC { 宽度：50％ }

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

摘要：那么如何获得行为：SourceList（pickList）应该使用freeSpace。如果还不够 - ＆gt;调整sourceList的大小？（就像在表格中，您可以使用table-layout: fixed;执行某些操作）。由于使用chrome devTools table-layout手动更改页面，我得到了我想要的。但是table由rich:pickList生成，我无法为它们设置css属性（没有id，类..）：

我想在本文开头就像 Aim Pic 一样。

Answer 1

您不需要ID或类来使用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设置为＆＃34; auto＆＃34; （＆＃34; 100％＆＃34;也会起作用，我必须修改说明）

RichFaces选项列表：流体可滚动列表/列

1 个答案: