0

I use a Primefaces DataTable to display some data. I also allow filtering and sorting. In Internet Explorer, setting the filter to a value that returns no results (empty table) shrinks the table too much and scroll bars appear: enter image description here

This is of course very ugly. In all other browsers it works perfectly fine. So this might be a problem with the version of Internet Explorer or Primefaces that I use, but changing those is not really an option.

I probably need some CSS shenanigans to work around this. I tried using height/width and min-height/min-width and also the scrollWidth / scrollHeight and scrollable attributes of the p:dataTable but that didn't to the trick.

Any suggestions?

Edit: Using Primefaces 6.2.17, Internet Explorer 21H1

Christian O.
  • 468
  • 2
  • 12

1 Answers1

2

While looking through the rendered HTML I noticed that the <div> the dataTable was rendered inside (<div class="ui-datatable-tablewrapper">) had this CSS set:

.ui-datatable-tablewrapper {
    overflow: auto;
}

Setting it to overflow: visible; in my .css file solved my problem:

Christian O.
  • 468
  • 2
  • 12
  • oncomplete is an unconventional way of setting CSS. Why not create a custom style sheet? – Jasper de Vries Dec 01 '21 at 14:37
  • Putting the .ui-datatable-tablewrapper { overflow: auto; } in its own .css file (or into the jsf style="" attribute) had no effect. I assume it always got overwritten by the the dataTable. Adding !important also didn't do the trick, thats why I'm doing it with the ajax event – Christian O. Dec 01 '21 at 15:07
  • See https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles – Jasper de Vries Dec 01 '21 at 15:24
  • 1
    Thanks! now it works without the p:ajax element, I have updated my answer accordingly – Christian O. Dec 02 '21 at 09:25