search

EasyCorp / EasyAdminBundle

EasyAdmin is a fast, beautiful and modern admin generator for Symfony applications.
MIT License
4.04k stars 1.02k forks source link

Table-Specific Scrolling with Fixed Filters and Pagination, Avoiding Global Scroll #6443

Open ahmed-bhs opened 6 days ago

ahmed-bhs commented 6 days ago

Hello there, I'm using EasyAdmin 4.10.2 and I'm facing a responsive issue that I need help with:

Using the Dashboard::new()->renderContentMaximized() option for a full-size display, but I'm encountering a responsive issue with the layout. When I have multiple columns to display in the INDEX view, I am forced to scroll horizontally to access the remaining columns, as well as the filters and pagination, which makes the user experience less smooth. Is there a way to limit the scrolling to just the table, instead of having the default browser scroll affecting the entire page ?

Screenshot from 2024-09-12 15-09-21 Screenshot from 2024-09-12 15-09-33

When the tables are large, there's no scrollbar within the table itself. Instead, it pushes the navigation and hides the other columns.

Any help would be appreciated.

Jamie-Vandenbalck commented 6 days ago

I resolved the issue by applying the following CSS:

.ea-index section.main-content {
  overflow: hidden;
  position: relative;
}

.ea-index article.content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ea-index #main {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

However, it would be great to have an option to hide less important columns (on smaller screens) or implement expandable rows, where additional columns are revealed only after clicking on the row. This approach could improve readability on smaller screens. A good example of this can be found here: Expandable Table Row.