Comment faire pour supprimer la barre de Défilement Horizontale dans <p:dataTable>

Je suis en train d'essayer de cacher la barre de défilement horizontale .

J'ai essayé de nombreuses solutions, mais il ne semble pas fonctionner.
La Solution que j'ai essayé est donné ici

Voici mon code que j'ai utilisé dans le 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/>

J'ai essayé d'utiliser overflow-y: scroll;overflow-x: hidden; pour cacher le horzontal barre de défilement, mais aucun d'entre eux ne semble avoir été appliqués à la datatable.

S'il vous plaît laissez-moi savoir vos suggestions pour résoudre ce problème

J'ai résolu le problème ci-dessus, en ajoutant .ui-datatable-défilement-body { overflow-y: scroll !important; overflow-x: hidden !important; } pour ma feuille de style par défaut.Mais cette modification du tableau ci-dessus, mais que le même changement a un impact sur les autres tables de données où qu'elle supprime toutes les barres de défilement horizontale,depuis sa un générique.Comment puis-je appliquer ce changement spécifique datatable l'appel de la feuille de style.

OriginalL'auteur techy360 | 2014-05-27

  1. 6

    Je viens de faire un style personnalisé pour le <p:dataTable> et a appelé le style que dans la .

    Le style que j'ai écrit était 

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


    Et j'ai appelé le styleclass styleClass="mystyle" dans le <p:dataTable> que j'ai donnés ci-dessous

    <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}">
    Dans mon cas, travaillé - .mystyle .ui-datatable-scrollable-view .ui-datatable-scrollable-body{ overflow-y: scroll !important; overflow-x: hidden !important; }

    OriginalL'auteur techy360

  2. 0

    Dans mon cas, j'ai eu une barre de défilement verticale, car l'un des styles utilisés à l'intérieur de la cellule définie non nulle padding.


    Redéfinir le style avec zéro padding la barre de défilement disparu.

    OriginalL'auteur rpuertam

  3. 0

    Vous pouvez ajouter 20 px de hauteur, dans mon cas, j'ai ajouté dans la largeur, comme j'ai besoin de la largeur.
    Donc, mon div conteneur :

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

    J'ai utilisé ce truc parce que je ne veux que la barre de défilement verticale caché, et malheureusement, je ne sais pas comment masquer uniquement à la verticale sur le primeng table de données. Et j'espère que c'est utile pour toi,

    Il y a déjà une bonne solution de travail.
    déjà la solution de travail que tu mentionnes n'a pas fonctionné pour moi, c'est pourquoi je propose celui-ci 😉

    OriginalL'auteur getName