primefaces 数据表过滤器 selectCheckboxMenu 与 bootsfaces

Question

我正在将 primefaces 数据表与 bootsfaces 一起使用，并且我想解决一个 CSS 冲突。

从 primefaces 展示中实现过滤器示例：

http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml

给了我这个结果： datatable filter example good

但是，在页面中添加一个 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>

给出这个结果： primefaces datatable filter style error

过滤器的下拉框的边距已更改，导致向下箭头的位置不正确。文本也减少到 0.85。

有没有一种方法可以将 bootsfaces 与 primefaces 数据表结合起来并保持 primefaces 下拉菜单格式？

Answer 1

感谢 Stephan - 顺便说一句，在 bootsfaces 上做的很棒，编程很有趣。

您的更改与我系统上的 primefaces 示例不太匹配，但它们是一种改进，让我对如何进行自己的更改有了很好的了解。

在我的系统上使用这些样式覆盖效果更好：

<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>

Answer 2

它还不完美，但添加这几行 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 组件的外观和感觉。