Improve overflow hidden on DataTable

[sliekens]

Every DataTable cell hides its overflow by default. Is this really necessary? What kind of content would cause cells to overflow in a bad way?

Same question for the header part of a scrollable table:

.ui-datatable-scrollable-header {
    overflow: hidden;
}

Why would you always want to hide overflow?

I'm asking because I keep running into situations where I need to display controls inside cells that should flow over the cell borders of the DataTable, such as drop-down lists and calendars . The default styling makes this more difficult than it should be.

[thenoen]

This is causing problems when I add dropdown filter to header - it is patially hidden behind data rows

and when I remove "overflow:hidden"

[sliekens]

I would like to know what problem is solved by hiding overflow. I just don't see it.

[thenoen]

"overflow:hidden" is causing problems (first picture). If I change it to "overflow:visible" the dropdown is visible as expected (second picture). After posting tjhis comment I found another github issue with workaround #2368

[sliekens]

So the question remains: why is "overflow:hidden" the default style? It causes many problems and appears to solve none.

[RebelSyntax]

Seems like that style is for everything I need to use. Kind of interesting considering later on in the template you have something like this going on for a ui-dropdown-panel class. z-index: 1001? hmmm....what's going on here?
element.style { display: block; visibility: visible; top: 20px; left: 0px; z-index: 1001; opacity: 1; }

[cagataycivici]

I'll rethink this for 4.1.0 final, it is only necessary for resizable columns and body of scrollable table, for other cases we can avoid it. Also overlay components have appendTo="body" to avoid this.

[sliekens]

Pulling components out of their parent node and appending them to the document root is a lazy workaround for something that can be solved with CSS only. I'm not very knowledgeable about accessibility but I can imagine that moving elements around the DOM like that makes web apps unusable to people who rely on screen readers and such.

[machfalcon]

We have a need to display a filter dropdown from the header of a table while using resizeble columns and a scrollable table. Hoping this usage can also be handled in the next version.

[cagataycivici]

@StevenLiekens I see that as a nice addon to enhance flexibility, so that you can customize the component. About overflow, we definitely need scrollable body to be auto to get the scrollbar, for scrollheader header and footer, it has to be hidden so that we can avoid display scrollbar for them.

For regular cells, it makes sense for only resizable columns to be overflow hidden, I'll do this change.

[dennisward]

I upgraded to 4.2.1 and the problem seems to still persist... appendTo="body" is still the only solution that I can tell.