Фильтр данных простых чисел selectCheckboxMenu с загрузочными гранями
Я использую исходные данные, которые можно определить с помощью загрузочных граней, и существует конфликт CSS, который я хотел бы обойти.
Реализация примера фильтра из демонстрации простых лиц:
http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml
дает мне такой результат: пример фильтра данных хорошо
Тем не менее, добавление компонента bootsfaces на страницу, например (единственное изменение заключается в добавлении пустой <b:inputtext> элемент):
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:b="http://bootsfaces.net/ui"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<b:inputText></b:inputText>
<p:dataTable var="car" value="#{dtFilterView.cars}" widgetVar="carsTable"
emptyMessage="No cars found with given criteria" filteredValue="#{dtFilterView.filteredCars}">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" style="width:150px" placeholder="Enter keyword"/>
</p:outputPanel>
</f:facet>
<p:column filterBy="#{car.id}" headerText="Id" footerText="contains" filterMatchMode="contains">
<h:outputText value="#{car.id}" />
</p:column>
<p:column filterBy="#{car.year}" headerText="Year" footerText="lte" filterMatchMode="lte">
<f:facet name="filter">
<p:spinner onchange="PF('carsTable').filter()" styleClass="year-spinner">
<f:converter converterId="javax.faces.Integer" />
</p:spinner>
</f:facet>
<h:outputText value="#{car.year}" />
</p:column>
<p:column filterBy="#{car.brand}" headerText="Brand" footerText="exact" filterMatchMode="exact" filterStyle="width: 100px">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('carsTable').filter()" >
<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{dtFilterView.brands}" />
</p:selectOneMenu>
</f:facet>
<h:outputText value="#{car.brand}" />
</p:column>
<p:column filterBy="#{car.color}" headerText="Color" footerText="in" filterMatchMode="in" filterStyle="margin-bottom 0px">
<f:facet name="filter">
<p:selectCheckboxMenu label="Colors" onchange="PF('carsTable').filter()" panelStyle="width:125px" scrollHeight="150">
<f:selectItems value="#{dtFilterView.colors}" />
</p:selectCheckboxMenu>
</f:facet>
<h:outputText value="#{car.color}" />
</p:column>
<p:column filterBy="#{car.sold}" headerText="Status" footerText="equals" filterMatchMode="equals">
<f:facet name="filter">
<p:selectOneButton onchange="PF('carsTable').filter()">
<f:converter converterId="javax.faces.Boolean" />
<f:selectItem itemLabel="All" itemValue="" />
<f:selectItem itemLabel="Sold" itemValue="true" />
<f:selectItem itemLabel="Sale" itemValue="false" />
</p:selectOneButton>
</f:facet>
<h:outputText value="#{car.sold ? 'Sold': 'Sale'}" />
</p:column>
<p:column filterBy="#{car.price}" headerText="Price" footerText="custom (min)" filterFunction="#{dtFilterView.filterByPrice}">
<h:outputText value="#{car.price}">
<f:convertNumber currencySymbol="$" type="currency"/>
</h:outputText>
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
даёт такой результат: ошибка стиля фильтра данных с использованием простых чисел
В раскрывающемся списке фильтров изменено поле, в результате чего стрелка вниз не находится в правильном положении. Текст также уменьшен до 0,85.
Есть ли способ, которым я могу комбинировать загрузочные грани с данными, доступными с данными, и поддерживать форматирование выпадающего меню простых граней?
2 ответа
Спасибо Stephan - отличная работа над bootsfaces, между прочим, с ним очень весело программировать.
Ваши изменения не совсем соответствовали примеру основных лиц в моей системе, но они были улучшением и дали мне хорошее представление о том, как вносить свои изменения.
Использование этих переопределений стилей работало лучше в моей системе:
<style>
.ui-widget {
font-size: 16px !important;
}
.ui-selectcheckboxmenu-label {
margin-bottom: 0px;
}
.ui-selectcheckboxmenu-trigger {
width: auto !important;
}
.ui-selectonemenu-trigger {
width: auto !important;
}
.ui-selectcheckboxmenu-label {
font-weight: normal !important;
}
label{
font-weight: normal !important;
}
body {
line-height: 18px !important;
}
</style>
Это еще не идеально, но добавление этих нескольких строк кода CSS делает версию BootsFaces почти идеально похожей на оригинальную версию только для PrimeFaces:
<h:head>
<title>Facelet Title</title>
<style>
.ui-widget {
font-size: 17.6px !important;
}
* {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
*:before, *:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
body {
margin: 8px !important;
}
</style>
</h:head>
Однако большинство этих настроек могут влиять на компоненты BootsFaces. Установка размера шрифта на 0,85 почти наверняка является ошибкой в BootsFaces, которую мы собираемся решить, но другие настройки выглядят как другие подходы к сбросу настроек браузера по умолчанию в CSS. Другими словами: исправление внешнего вида сложного компонента PrimeFaces может испортить внешний вид компонентов BootsFaces.