Как изменить макет h: selectManyCheckbox, чтобы иметь несколько строк?

В настоящее время я работаю над поиском, который проходит через базу данных и доставляет результат в виде h:dataTable в моем веб-приложении. Однако, что h:dataTable имеет довольно много дополнительных строк.Как изменить макет h: selectManyCheckbox, чтобы иметь несколько строк?

Простого код моего h:selectManyCheckbox:

<h:panelGroup styleClass="panelGroup"> 
    <h:selectManyCheckbox value="#{searchBean.auswahl}"> 
     <f:selectItems value="#{searchBean.auswahl}" /> 
    </h:selectManyCheckbox> 
</h:panelGroup>

С макетом по умолчанию моего h:selectManyCheckbox он просто отображает все мои ~ 30 флажков в одной строке, полностью губит дизайн сайта.

Однако после просмотра возможных вариантов компоновки, кажется, только два.

Либо отображение их всех в одной строке по горизонтали, как по умолчанию, или отображение их всех по вертикали. Я предпочитаю компоновку чего-то вдоль строк из нескольких строк с 5 флажками.

Как это достичь?

источник

2016-11-21 APL

Нужно ли использовать флажки? вы можете использовать ' ... ', чтобы избежать всех cluter. –

Проблема с 'selectManyCheckbox' заключается в том, что UIComponent создает флажки внутри сетки' table', поэтому даже если вы должны были пропускать ограничения * через * css или даже загрузочный файл, я все переоцениваю класс компонентов из того, что у меня есть пытался. Может быть, вы могли бы создать свой собственный ** Custom UIComponent **, который вместо этого создает флажки в сетке LIST? это было бы легче стилизовать. –

У меня действительно был «код» selectManyListbox перед тем, как реализовать «code» selectManyCheckbox. Проблема в том, что он не выглядит красиво и не очень приятно работать, если у вас есть более 30 возможных вариантов. Думаю, мне нужно будет изучить собственный пользовательский компонент, если я не смогу найти что-нибудь еще. – APL

Пусть все ячейки таблиц float оставленных в качестве block элементов и clear поплавка каждого Xn+(X+1) child, где X этого число столбцов. Чтобы все было в порядке, убедитесь, что пробел don't wrap и что ширина равна точно 100%/X с учетом того, что box sizing охватывает прокладку + границу.

Другими словами, учитывая:

<h:selectManyCheckbox styleClass="grid">

Вы можете создать сетку с 3-колонки, как показано ниже:

.grid td { 
    display: block; 
    float: left; 
    white-space: nowrap; 
    width: 33.3333333333%; 
    box-sizing: border-box; 
} 
.grid td:nth-child(3n+4) { 
    clear: left; 
}

и сетка с 4 колонки, как показано ниже:

.grid td { 
    display: block; 
    float: left; 
    white-space: nowrap; 
    width: 25%; 
    box-sizing: border-box; 
} 
.grid td:nth-child(4n+5) { 
    clear: left; 
}

И сетка из 5 колонок, как показано ниже:

.grid td { 
    display: block; 
    float: left; 
    white-space: nowrap; 
    width: 20%; 
    box-sizing: border-box; 
} 
.grid td:nth-child(5n+6) { 
    clear: left; 
}

И так далее.

источник

2017-08-24 21:07:49 BalusC

Как изменить макет h: selectManyCheckbox, чтобы иметь несколько строк?

ответ

Смежные вопросы