How to prevent p:columnToggler from showing scrollbars?

Question

i'm using Primefaces 6.2 with a dataTable and a columnToggler to hide/display some of the colums of the table. Here the xhtml code

<f:facet name="header" style="height: 300px; width: 200px">
    <p:commandButton id="wlToggler" type="button" value="Columns"
                     style="float:right; background-color: #f9f9f9"
                     styleClass="btn btn-success" icon="fa fa-align-justify" />
    <p:columnToggler datasource="whiteListItemTable" trigger="wlToggler">
        <p:ajax event="toggle"
                listener="#{whiteListController.onToggleWhiteList}" />
    </p:columnToggler>
</f:facet>

I have around 10 columns to toggle, but i'm not happy when clicking on the toggle button because not all the columns are displayed. I would like to avoid vertical and horizontal elevators on the items listed:

Just list all the columns and be able to see the full column names without any lift.

Do you know how i can do that ?

Thanks for your help

I've tried your example but by default Primefaces columnToggler adapts to its content, so I don't get any scrollbar. Please provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) — WoAiNii, Apr 16 '20 at 17:17
I noticed you were online an hour ago. I did not downvote (yet) but please read http://idownvotedbecau.se/beingunresponsive http://idownvotedbecau.se/nomcve These contain good descriptions on why you should do certain things before AND after posting on stackoverflow — Kukeltje, Apr 17 '20 at 08:00

score 0 · Answer 1 · answered Aug 29 '23 at 15:39

A quickie workaround would be to style the height with !important

.ui-columntoggler {
    height: 369px !important;
}

but you could also play around with height, min-height, max-height (width too, but needs testing) and using selectors to make this mo-better.

How to prevent p:columnToggler from showing scrollbars?

1 Answers1