RichFaces PickList: Жидкий прокручивать список/колонок

Question

Aim

Я хочу это: 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 становится меньше или ISN даже не нужно. PickList, например. должен использовать 70% пространства.
2. При изменении размера окна браузера pickList (и sourceList) должен изменяться по ширине, чтобы полоса прокрутки в исходных списках снова становилась необходимой.

Что я пытался

эти ресурсы используются:

• Посмотрел на хромированных Devtools ширина страницы
• компонент ссылки
• ява-док

Отметил:

• rich:pickList только атрибут тега для ширина является listWidth который только давайте вы определяете ширину пикселя элементов списка (в процентах не возможно)

• если нет listWidth не определен , listWidth - width: 200px. Использование

  .rf-pick-lst-scrl { ширина: начальная! }

  Я смог изменить его на это. Теперь исходный список больше, но при изменении размера окна браузера ширина исходного списка не изменяется. Вместо этого есть apperas полоса прокрутки для всей страницы.

• Я попытался установить ширину в процентах от сурового стиля. Классы. Как, например,

  .РФ-подборщик SRC { ширина: 50% }

  Но это только Halfs SOURCELIST и не Picklist, таким образом, пространство для кнопок только расширить.

Резюме: Так как получить поведение: SOURCELIST (PickList) следует использовать FREESPACE. Если этого недостаточно -> измените размер исходного списка? (Как в таблице, вы можете что-то сделать с). Из-за ручного изменения страницы с помощью chrome devTools table-layout у меня есть то, что я хочу. Но table получает генерируется rich:pickList и я не могу установить свойства CSS для них (не идентификатор, класс ..):

Я хочу, чтобы это как Aim Pic в начале этого поста.

Answer 1

Вам не нужен идентификатор или класс использовать 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 на «Авто» («100%» также будет работать, я буду необходимо исправить описание)