Bug 12580 - DataTables overflow their container elements
Summary: DataTables overflow their container elements
Status: NEW
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low minor (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on: 27777
Blocks:
  Show dependency treegraph
 
Reported: 2014-07-16 04:24 UTC by David Cook
Modified: 2021-02-24 16:28 UTC (History)
2 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Text to go in the release notes:
Version(s) released in:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description David Cook 2014-07-16 04:24:54 UTC
Currently, if you have a DataTable (or really any table probably but this is when I'm noticing it) that is wider than maybe 80% of the page, it will overflow its containing div element when you shrink your screen size.

Most of us developers probably have wide monitors, so we never notice this, but if you shrink the window or use a narrower (ie older/cheaper) monitor, it'll become obvious quite rapidly.

Search for all subscriptions and you'll notice the DataTable running off the right side of the page
http://KOHA/cgi-bin/koha/serials/serials-search.pl?searched=1&title_filter=

Look at the detail page for a bibliographic record that has a really long URL in an item record
http://KOHA/cgi-bin/koha/catalogue/detail.pl?biblionumber=1

--

As Liz has mentioned, this is a problem that plagues many (re: most) web apps. It happens on Bugzilla as well if you narrow your screen. Tables and text-areas will overflow to the right.

Even if we make it so that the containing <div> expands to the width of the overflowing table...there will come a point when there are siblings of the parent that won't stretch to the edge of the page. That is, the header will still be too short. 

I don't know if there really is a good solution to this...
Comment 1 David Cook 2014-07-16 04:58:43 UTC
An idea might be to add more "Show/hide" column options to more DataTables.

This would work nicely: http://datatables.net/examples/api/show_hide.html

However, that's in DataTables 1.10, whereas we're using DataTables 1.9 which is now considered legacy. Unfortunately, I couldn't find an equivalent in the legacy docs: http://legacy.datatables.net/ref
Comment 2 Katrin Fischer 2020-01-05 23:45:51 UTC
(In reply to David Cook from comment #1)
> An idea might be to add more "Show/hide" column options to more DataTables.
> 
> This would work nicely: http://datatables.net/examples/api/show_hide.html
> 
> However, that's in DataTables 1.10, whereas we're using DataTables 1.9 which
> is now considered legacy. Unfortunately, I couldn't find an equivalent in
> the legacy docs: http://legacy.datatables.net/ref

We now have this is in a lot of the larger tables with the Colvis plugin.

I am not sure there is a general solution to this - long text like urls won't wrap in the browser and will always cause trouble in tables - it also would in other applications. Should we still keep this open?
Comment 3 David Cook 2020-01-06 05:16:33 UTC
(In reply to Katrin Fischer from comment #2)
> I am not sure there is a general solution to this - long text like urls
> won't wrap in the browser and will always cause trouble in tables - it also
> would in other applications. Should we still keep this open?

I figure it's still relevant. I was probably a bit too specific when I originally opened this bug report. 

I think it's really just a case of making sure that the wrappers and such expand to fill the whole page when there is this kind of overflow. Otherwise, the web page (usually the staff client) looks bad when scrolling over to the right.
Comment 4 Katrin Fischer 2020-01-06 09:40:01 UTC
But maybe this should be a coding guideline then and not a bug report? The issue I see with such bug reports is that they don't get found and cannot really be fixed, as what they describe is not specific enough.
Comment 5 Martin Renvoize 2021-01-19 17:38:02 UTC
I tried a fairly global solution to this on bug 25242 which promptly got reverted when we found it had far-reaching effects and not enough time to fix all issues.

I still think it's the way forward personally.. but we will need to work through each table fixing issues.

The solution was to make tables fixed width and then use break-words to wrap.

See: https://bugs.koha-community.org/bugzilla3/page.cgi?id=splinter.html&bug=25242&attachment=108438 , https://bugs.koha-community.org/bugzilla3/page.cgi?id=splinter.html&bug=25242&attachment=108439 and https://bugs.koha-community.org/bugzilla3/page.cgi?id=splinter.html&bug=25242&attachment=108574