我正在尝试隐藏 .
中的水平滚动条
我尝试了很多解决方案,但似乎没有用。
我尝试的解决方案给出了 here
这是我在 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;隐藏水平滚动条,但它们似乎都没有应用于数据表。
请让我知道您解决此问题的建议
最佳答案
我刚刚为 <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}">
关于css - 如何删除 <p :dataTable> 中的水平滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23889191/