primefaces 數據表過濾器 selectCheckboxMenu with bootsfaces

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 數據表過濾器樣式錯誤

過濾器的下拉框更改了邊距，導致向下箭頭不在正確位置。 文本也減少到 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 組件的外觀和感覺。

primefaces 數據表過濾器 selectCheckboxMenu with bootsfaces

問題描述

2 個解決方案

解決方案1
1 2016-09-15 12:58:14

解決方案2
0 2016-09-14 21:54:29

primefaces 數據表過濾器 selectCheckboxMenu with bootsfaces

問題描述

2 個解決方案

解決方案1 1 2016-09-15 12:58:14

解決方案2 0 2016-09-14 21:54:29

解決方案1
1 2016-09-15 12:58:14

解決方案2
0 2016-09-14 21:54:29