primefaces數據表篩選器selectCheckboxMenu與bootsfaces

我正在使用bootsfaces與bootsfaces數據表，並且存在CSS衝突，我想解決這個問題。primefaces數據表篩選器selectCheckboxMenu與bootsfaces

實現從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下拉菜單的格式？

來源

2016-09-13 David

這不是很完美，但添加的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組件的外觀和感覺。

來源

2016-09-14 21:54:29

謝謝斯蒂芬 - 偉大的工作在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>

來源

2016-09-15 12:58:14 David

primefaces數據表篩選器selectCheckboxMenu與bootsfaces

回答

相關問題