Question

我有一个数据表，在标题中我有：

  -The name of the table
  -A button

我希望名称显示在中间，而按钮则显示在右侧。

<p:dataTable widgetVar="liveResizeTableWdg"
            var="c"
            value="#{errorContractBean.getDataList(loginBean.usernameLoggedOn)}"
            paginator="true" 
            rows="33"
            paginatorPosition="bottom"
            currentPageReportTemplate="Showing {startRecord}-{endRecord} out of {totalRecords}, 
            Page: {currentPage}/{totalPages}, 
            Total: #{errorContractBean.dataListSize}"
            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
            rowKey="#{c.uniqueRowID}"
            selection="#{errorContractBean.selectedContract}"
            selectionMode="single" 
            scrollable="true" 
            scrollWidth="auto"
            scrollHeight="auto"
            filteredValue="#{errorContractBean.filteredContracts}"
            resizableColumns="true" 
            liveResize="true" 
            id="liveResizeTable"
            sortMode="single"
            styleClass="table" 
            headerClass="table-header"
            rowStyleClass="rowDef"
            lazy="true">



            <f:facet name="header">
                <span style="font-size: 1.5em; color: red;">Error Transactions</span>
                <p:commandButton value="Refresh" actionListener="#{errorContractBean.refreshPage}" 
                        update=":form" style="position:relative;" oncomplete="liveResizeTableWdg.filter(); liveResizeTableWdg.clearFilters();"> 
                </p:commandButton>  
            </f:facet>

现在名称和按钮都出现在中间位置：

表：

--------------------------------------------------------------------------
.........................                       NAME OF THE TABLE - BUTTON                        
--------------------------------------------------------------------------

我想有这个：

--------------------------------------------------------------------------
......................... NAME OF THE TABLE......................... BUTTON                        
--------------------------------------------------------------------------

我希望这个位置是相对的，因为当我减少窗口按钮时必须按照页面。如果我尝试在css中指定left或right，则2个元素不会跟随页面大小。

Answer 1

您是否已尝试使用按钮上的style="float: right;"？

Answer 2

我确实按以下方式更改了按钮：

<p:commandButton value="Refresh" actionListener="#{errorContractBean.refreshPage}" 
                        update=":form" style="float: right;" oncomplete="liveResizeTableWdg.filter(); liveResizeTableWdg.clearFilters();"> 
</p:commandButton>

并且表的样式有

overflow: visible

相对定位一个元素在中心，一个在右边

2 个答案: