如何在<p:dataTable>中移除水平滚动条

Question

如何在<p:dataTable>中移除水平滚动条

7

我正在尝试隐藏 "." 中的水平滚动条。
我尝试了许多解决方案，但似乎都无效。我尝试过的解决方案在这里给出。
以下是我在XHTML中使用的代码：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <h:form id="commentsform">
        <p:outputPanel id="commenttable">
            <p:dataTable id="commentsdt" var="row" stickyHeader="true"
                value="#{bean.displayCommentsDetailsList}"
                selection="#{bean.selectedComments}"
                rowKey="#{row.commentDate}" rows="20" paginator="true"
                paginatorPosition="bottom" rowIndexVar="index"
                paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                scrollable="true" scrollHeight="150" style="width:100%;overflow-x:hidden;overflow-y:auto;"
                rowStyleClass="#{row.changeFieldFlg==true ? 'highlight' : null}">

                <f:facet name="header">
                    <h:panelGrid columnClasses="alignRight">
                        <p:commandButton
                            disabled="#{bean.editCmdActionflg == false}"
                            actionListener="#{bean.addComments}"
                            update="commentsdt :SystemDetailsinfoForm:line :growl :error"
                            partialSubmit="true" title="Add Row.." icon="ui-icon-plusthick"
                            styleClass="iconButton" />
                    </h:panelGrid>
                </f:facet>

                <p:column width="160" headerText="Date" style="width:150px">
                    <h:outputText value="#{row.commentDate}" style="width:150px" />
                </p:column>
                <p:column width="160" headerText="Author" style="width:150px">
                    <h:outputText value="#{row.author}" style="width:150px" />
                </p:column>
                <p:column width="100" headerText="Deliverable" style="width:90px"
                    rendered="#{bean.selectedChoice == '2'}">
                    <h:outputText value="#{row.delivName}"
                        rendered="#{bean.selectedChoice == '2'}"
                        style="width:90px" />
                </p:column>
                <p:column headerText="Comments">
                    <div align="left">
                        <h:outputText value="#{row.comments}"
                            rendered="#{row.editableflg==false}"></h:outputText>
                        <p:inputTextarea value="#{row.comments}"
                            style="width:98%;float:left" rendered="#{row.editableflg==true}">
                        </p:inputTextarea>
                    </div>
                </p:column>

            </p:dataTable>
        </p:outputPanel>
    </h:form>
</ui:composition><br/>

我尝试使用 overflow-y: scroll;overflow-x: hidden; 来隐藏水平滚动条，但它们似乎都没有被应用到数据表中。
请告诉我您的建议以解决此问题。

- Karthik

我通过在默认样式表中添加.ui-datatable-scrollable-body {overflow-y: scroll !important; overflow-x: hidden !important;}来解决上述问题。但是，这个更改只适用于上面的表格，而同样的更改会影响其他数据表，因为它是通用的。我该如何将此更改应用于调用样式表的特定数据表？ - Karthik

3个回答

0

你可以增加20像素的高度，我个人的情况是在宽度上增加了，因为我需要它在宽度上。所以我的div容器：

  .container {
height: 100%;
width: calc(100% + 20px);}

我使用了这个技巧，因为我只想隐藏垂直滚动条，但不幸的是，我不知道如何仅隐藏primeng数据表格上的垂直滚动条。希望对你有所帮助。

- getName

1

你提到的已经可行的解决方案对我不起作用，所以我建议这个解决方案 ;) - getName

0

在我的情况下，我有一个垂直滚动条，因为单元格内使用的样式之一定义了非零的padding。通过重新定义具有零padding的样式，滚动条消失了。

- rpuertam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Karthik · Accepted Answer

我刚刚为<p:dataTable>制作了自定义样式，并在中调用了该样式。

我编写的样式是：

.mystyle.ui-datatable .ui-datatable-scrollable-body{
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

我在下面给出的<p:dataTable> 中调用了样式类styleClass="mystyle"。

<p:dataTable id="commentsdt" var="row" stickyHeader="true"
                value="#{systemDetailsBean.displayCommentsDetailsList}"
                selection="#{systemDetailsBean.selectedComments}" rowKey="#{row.commentDate}"
                rows="20" paginator="true" paginatorPosition="bottom"
                rowIndexVar="index"
                paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                scrollHeight="150" scrollable="true" style="width:100%;"  styleClass="mystyle"
                rowStyleClass="#{row.changeFieldFlg==true ? 'highlight' : null}">