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

观察：

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

瞄准

1. 我希望pickList 使用右侧的可用空间，以便sourceList 中的滚动条变得更小或者甚至没有必要。选择列表例如应该使用 70% 的空间。
2. 当调整浏览器窗口的大小时，pickList（和 sourceList）应该调整宽度，以便 sourceLists 中的滚动条再次变为必需。

我尝试了什么

使用了这些资源：

• 看了页面宽度chrome devTools
• 组件参考
• java文档

注意：

• rich:pickList width 的唯一标签属性是 listWidth，它只能让您定义列表元素的像素宽度（不可能百分比）

• 如果没有定义 listWidth，则 listWidth 为width: 200px。使用

  .rf-pick-lst-scrl{ 宽度：初始！重要； }

  我能够将其更改为这个。 sourceList 现在更大了，但是当我调整浏览器窗口的大小时，sourceList 的宽度不会调整大小。取而代之的是整个页面的滚动条。

• 我尝试将 width 设置为严重样式类的百分比。就像例如

  .rf-pick-src{ 宽度：50% }

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

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

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

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%”也可以，我必须修正描述）