Page 1 of 1

DataTable Layout Issue with facet "paginatorTopRight"

Posted: 22 Jan 2019, 22:04
by emre
Hi all,

We have a datatable layout issue when tableStyle="table-layout: auto;" and there is a "paginatorTopRight" facet to add a refresh button. It works well when there is at least one record. However if there is no record found in the table, layout is broken.
Please see the below images.

Thank you for any help.

https://drive.google.com/open?id=1eIsAA ... ruMQnk0ZID

https://drive.google.com/open?id=1seCmw ... y_KsZ4KoKu

Code: Select all

 <p:dataTable
            var="projectTask"
            lazy="true"
            value="#{projectTaskModel}"
            reflow="true"
            paginator="true"
            paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
            rowsPerPageTemplate="5,10,20"
            rows="5"
            selectionMode="single"
            selection="#{controller.selectedTask}"
            sortOrder="descending"
            sortField="id"
            tableStyle="table-layout: auto;"
            emptyMessage="#{commonMsg.noRecordFound}"
    >
      
        <p:column headerText="#{commonMsg.id}" sortBy="#{projectTask.id}">
            <h:outputText value="#{projectTask.id}"/>
        </p:column>
        <p:column headerText="#{commonMsg.project}" rendered="#{showProject}" sortBy="#{projectTask.projectName}">
            <h:outputText value="#{projectTask.project.name}"/>
        </p:column>

        <p:column headerText="#{commonMsg.assignee}" sortBy="#{projectTask.assigneeUserName}"
                  rendered="#{showAssignee}">
            <h:outputText value="#{projectTask.assigneeUserName}"/>
        </p:column>

        <p:column headerText="#{projectMsg.taskType}" style="text-align: center"
                  sortBy="#{projectTask.projectTaskTypeName}">
            <i class="fa fa-fw #{projectTask.taskType.icon}"/>
            <h:outputText value="  #{projectTask.taskType.name}"/>
        </p:column>
        <p:column headerText="#{projectMsg.title}" sortBy="#{projectTask.title}">
            <h:outputText value="#{projectTask.title}"/>
        </p:column>
        <p:column headerText="#{commonMsg.status}" sortBy="#{projectTask.projectTaskStatusName}">
            <i class="fa fa-fw #{projectTask.status.icon}"/>
            <h:outputText value=" #{projectTask.status.name}"/>
        </p:column>


        <p:column headerText="#{commonMsg.startDate}" sortBy="#{projectTask.startDate}">
            <h:outputText value="#{projectTask.startDate}">
                <f:convertDateTime pattern="#{configuration.getParameterValue('dateFormatPattern')}"/>
            </h:outputText>
        </p:column>

        <p:column headerText="#{msg.plannedEndDate}" sortBy="#{projectTask.plannedEndDate}">
            <h:outputText value="#{projectTask.plannedEndDate}">
                <f:convertDateTime pattern="#{configuration.getParameterValue('dateFormatPattern')}"/>
            </h:outputText>
        </p:column>

        <p:column headerText="#{commonMsg.endDate}" sortBy="#{projectTask.endDate}">
            <h:outputText value="#{projectTask.endDate}">
                <f:convertDateTime pattern="#{configuration.getParameterValue('dateFormatPattern')}"/>
            </h:outputText>
        </p:column>

        <f:facet name="paginatorTopRight">
            <p:commandButton
                    icon="fa fa-refresh"
                    styleClass="secondary"
                    style="position: relative; bottom: 5px"
                    process="@this"
                    update="#{dataPanel}"/>
        </f:facet>

Re: DataTable Layout Issue with facet "paginatorTopRight"

Posted: 23 Jan 2019, 15:05
by mert.sincan
Could you please try the following css?

Code: Select all

body.layout-compact .ui-datatable .ui-paginator {
   min-height: 25px; /* You can change the value according to your issue */
}

Re: DataTable Layout Issue with facet "paginatorTopRight"

Posted: 23 Jan 2019, 22:25
by emre
Hi Aragon,

Thank you very much! It worked. Now all looks ok.

Regards

Re: DataTable Layout Issue with facet "paginatorTopRight"

Posted: 24 Jan 2019, 07:53
by mert.sincan
Hi,

Glad to hear, thanks a lot for the update!

Best Regards,