Created attachment 145090 [details] Image of issue When a transaction is added to a patron's account the table overflows the div and is cut-off by the window size.
Created attachment 145091 [details] [review] Bug 32577: Transaction table overflows div The transations table on a patron's account overflows the window and needs to be scrollable Test plan: 1) Add a fine to a patron 2) Navigate to that Patrons detail page and click on the accounting tab from the menu on the left 3) Observe that the table overflows the window as per the image attached to this bug 4) Apply patch 5) Repeat step 2 6) The table should now have a scrollbar and be contained within its div rather than overflowing
There will probably be other examples of this - maybe something needs to be done to the KohaTable wrapper to fix this universally...? I've opted for an overflow scroll here, feedback on other/preferred options is welcome
Created attachment 145335 [details] [review] Bug 32577: Transaction table overflows div The package works well, but we could also put it on the "make a payment" page. Signed-off-by: Marius Mandrescu <marius.mandrescu@inLibro.com>
This problem is true of any table that's wide enough to extend off the page, so any solution we do should be global if possible. I've been thinking about a solution that would add "display:table; width:100%" to .tab-content and .page-section. This would make those containers expand to the width of the table. I'm not a fan of having "overflow:scroll" on the table wrapper because users with a basic mouse will have to scroll all the way down to the bottom of the table to reach the scrollbar. It can also be difficult to tell at first glance that the table is overflowing at all. I think it's better that the page itself have a horizontal scrollbar if necessary.
I think a horizontal scroll bar was also highlighted as an accessibility issue (bug 33516), so we should avoid it. How can we proceed here? Owen, do you have a patch with your idea for comparison?