RichFaces 选择列表：流动的可滚动列表/列

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 有一个滚动条，因为它的元素太大。
右边有很多space

目标

我希望 pickList 使用右侧的空闲 space，以便 sourceList 中的滚动条变小，甚至不需要。 pickList 例如应该使用 space.
当调整浏览器大小时 window pickList（和 sourceList）的宽度应该调整，以便 sourceLists 中的滚动条再次变得必要。

我试过的

使用了这些资源：

查看页面宽度chrome devTools
组件参考
java-文档

记下:

rich:pickList 只有 width 的标签属性是 listWidth 这只能让你定义列表元素的像素宽度（百分比不是可能）
如果没有定义listWidth，则listWidth为width: 200px。使用

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

我可以把它改成这个。 sourceList 现在更大了，但是当我调整浏览器大小时 window，sourceList 宽度没有调整。相反，整个页面都有一个滚动条。
我试图将宽度设置为几个 styleClasses 的百分比。像例如

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

但这只是 sourceList 的一半，而不是 pickList，因此按钮的 space 只会加宽。

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

我想要它就像post开头的目标图片。

Answer 1

您不需要 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%”也可以，我必须修改说明）

RichFaces 选择列表：流动的可滚动列表/列

RichFaces picklist: Fluid scrollable list/ column

css

richfaces

jsf-2