Primefaces выберите макетManyCheckbox сверху вниз в столбцах - PullRequest
Новая
       30

Primefaces выберите макетManyCheckbox сверху вниз в столбцах

6 голосов
/ 18 октября 2019

Задача: есть панель с флажками selectMany, имеющая 5 столбцов. Значения полей выбора упорядочены по возрастанию, но они отображаются слева направо в столбцах, а не сверху вниз.

Использование: Primefaces Код: 

<p:selectManyCheckbox id="chkbx" value=.. layout="grid" columns="5">
<p:selectItems value=.. itemValue=".." itemLabel=".."/>
</p:selectManyCheckbox>

Текущий экран: 

[] a    [] b    [] c  

[] d    [] e    [] f

[] g    [] h    [] i

Ожидается: 

[] a    [] d    [] g  

[] b    [] e    [] h

[] c    [] f    [] i

1 Ответ

5 голосов
/ 21 октября 2019

К счастью, у нас есть CSS на помощь здесь. В витрине есть пример сетки:

existing grid layout

Если вы посмотрите на генерируемый HTML, вы увидите что-то вроде 

<table id="j_idt701:grid" role="presentation" class="ui-selectmanycheckbox ui-widget">
    <tbody>
        <tr>
            <td>
                <div class="ui-chkbox ui-widget">
                    <div class="ui-helper-hidden-accessible">
                        <input id="j_idt701:grid:0" name="j_idt701:grid" type="checkbox" value="Miami" data-p-hl="manychkbox" data-p-grouped="true">
                    </div>
                    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                        <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c" />
                    </div>
                </div>
                <label for="j_idt701:grid:0">Miami</label>
            </td>
            <td>
                <div class="ui-chkbox ui-widget">
                    <div class="ui-helper-hidden-accessible">
                        <input id="j_idt701:grid:1" name="j_idt701:grid" type="checkbox" value="London" data-p-hl="manychkbox" data-p-grouped="true">
                    </div>
                    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                        <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"/>
                    </div>
                </div>
                <label for="j_idt701:grid:1">London</label>
            </td>
            <td>
                <div class="ui-chkbox ui-widget">
                    <div class="ui-helper-hidden-accessible">
                        <input id="j_idt701:grid:2" name="j_idt701:grid" type="checkbox" value="Paris" data-p-hl="manychkbox" data-p-grouped="true">
                    </div>
                    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                        <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"/>
                    </div>
                </div>
                <label for="j_idt701:grid:2">Paris</label>
            </td>
        </tr>
        <tr>...</tr>
        <tr>...</tr>
    </tbody>
</table>

Да, здесь используется таблица, но люди часто забывают, что вы можете переопределить CSS существующих элементов с помощью CSS, поэтому вы можете сделать так, чтобы table, tbody, tr и td отображались как 'flexвместо значений по умолчанию. Просто используйте CSS ниже, чтобы сделать это. 

table.ui-selectmanycheckbox, table.ui-selectmanycheckbox tbody ,table.ui-selectmanycheckbox tr, table.ui-selectmanycheckbox td{
    display: flex;
}

Теперь хитрость заключается в том, чтобы поиграть с CSS flex-direction и назначить row для tbody и column для tr вот так 

table.ui-selectmanycheckbox tbody{
    flex-direction: row;
}

table.ui-selectmanycheckbox tr{
    flex-direction: column;
}

со следующим результатом:

result after applying flex css

И если вы хотите применить его только для одного выбора, добавьтеявный класс для компонента и использование его в селекторах.

...