primefaces datatable filter selectCheckboxMenu with bootsfaces

Question

I am using the primefaces datatable with bootsfaces, and there is a CSS conflict that I would like to work around.

Implementing the filter example from the primefaces showcase:

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

gives me this result: datatable filter example good

However, adding a bootsfaces component to the page, eg (the only change is to add an empty <b:inputtext> element):

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

gives this result: primefaces datatable filter style error

The dropdown box for the filters has its margin changed, causing the down arrow to not be in the correct position. The text is also reduced to 0.85.

Is there a way that I can combine bootsfaces with primefaces datatable and maintain the primefaces drop-down menu formatting?

David David · Accepted Answer · 2016-09-15T12:58:14

Thanks Stephan - great work on bootsfaces btw, it's a lot of fun to program with.

Your changes didn't quite match the primefaces example on my system, but they were an improvement, and gave me a good insight into how to make my own changes.

Using these style overrides worked better on my system:

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

primefaces datatable filter selectCheckboxMenu with bootsfaces

2 Answers