Problem: In the latest theme release we are still facing the issue when entity operations dropdown is hardly accessible when 1-2 items/rows are rendered in table due to overflow CSS property set to 'auto'. The issue was already raised here https://www.drupal.org/project/gin/issues/3278745 🐛 Overflow clipping dropbutton Fixed
Motivation: This issue can be partially solved by adding an identifier to the table in cases when it has a horizontal scroll. Using this identifier we can add overflow: auto to keep horizontal scroll possibility. In other cases (when no scroll is available) we can set overflow: visible, so the operations dropdown won't be clipped.
See existing issue https://www.drupal.org/project/gin/issues/3278745 🐛 Overflow clipping dropbutton Fixed
1. Check the inner table width and compare it with the parent block. If inner table width is equal to the parent block than it means that no horizontal scroll is available and we can add additional class to the wrapper. Code sample to cover window.load and window.resize events
// Add custom class to overview tables without horizontal scroll.
Drupal.behaviors.overviewTableIdentifier = {
attach(context) {
$(once('overview-table-identifier', '.gin-table-scroll-wrapper', context)).each(function (element) {
let overviewParent = $(this);
// Add/remove class on both load and resize events.
$(window).on('load', function() {
Drupal.behaviors.overviewTableIdentifier.overviewUpdateClass(overviewParent);
});
$(window).on('resize', function() {
Drupal.behaviors.overviewTableIdentifier.overviewUpdateClass(overviewParent);
});
});
},
overviewUpdateClass: (element) => {
// Find inner table.
let tableOverview = element.find('table');
if (tableOverview.length > 0) {
let parentWidth = element.width();
let tableWidth = tableOverview.width();
// Add class if inner table is not bigger than parent.
if (tableWidth <= parentWidth) {
element.addClass('no-horizontal-scroll'); // Better naming can be used
} else {
element.removeClass('no-horizontal-scroll');
}
}
}
};
2. Add an additional CSS rule that will take into account new class
.gin-table-scroll-wrapper.no-horizontal-scroll {
overflow: visible;
}
Unfortunately, as mentioned above, this will only solve the issue for tables without horizontal scroll.
Best regards
Closed: outdated
3.0
Code
Closing as outdated as the last couple of days we have integrated an table overflow indicator in 8.x-3.x-dev for all tables.