Question

我正在使用带有bootsfaces的primefaces数据表，并且我想解决一下CSS冲突。

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

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>

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

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

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

Answer 1

感谢Stephan - 对于bootfaces btw的精彩工作，编程很有趣。

您的更改与我系统上的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组件的外观。

primefaces数据表过滤器selectCheckboxMenu与bootsfaces

2 个答案: