How to remove the Horizontal Scroll bar in <p:dataTable>

css, datatable, jsf, primefaces, scrollbar

Solution

I just made a custom style for the `<p:dataTable>` and called that style in the .

The style I wrote was

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

And I called the styleclass styleClass="mystyle" in the `<p:dataTable>` which I have given below

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

Problem

I am trying to hide the horizontal scrollbar in . I tried many solutions but it doesn't seems to work. The Solution that I tried is given here Here is my code used that I used in 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/> ``` I tried using overflow-y: scroll;overflow-x: hidden; to hide the horzontal scrollbar but none of them seems to get applied to the datatable. Please let me know your suggestions to resolve this issue

Original source