Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-44694

convert .flexible-wrap and .no-overflow on tables to .table-responsive

    XMLWordPrintable

Details

    • Improvement
    • Status: Closed
    • Minor
    • Resolution: Won't Do
    • 2.6.2
    • None
    • HTML and CSS
    • MOODLE_26_STABLE

    Description

      There's a .flexible-wrap class that's used a few times in moodle on tables. It's not clear what the usage of this is, since there's not CSS styles defined for it (except for one in Quiz, where it's used for a graph image).

      It might be intended to let large tables scroll on smaller screens, as that's a common usage of a div around a table, with a name like wrap. However, it's used three times and two times it's used on the table tag itself, only once is it actually added to a "wrapper" div.

      The .no-overflow tag is also commonly used to do this for tables, this time fairly consistently on a div around the table tag. But it is also used for lots of other things, so you can't be quite sure what affect it's going to have if you style it.

      There's also a smattering of table-specific wrapper divs that do similar jobs e.g. .gradeparent around one of the grading tables.

      I'd suggest that all these usages be replaced with a specific class .table-responsive which is used only on a wrapper div around tables, which would then let these tables display better on small devices and all existing usages which I mentioned above get converted to use this convention.

      Attachments

        Issue Links

          Activity

            People

              Unassigned Unassigned
              bawjaws David Scotson
              Amy Groshek, David Scotson, David Woloszyn, Huong Nguyen, Jake Dallimore, Meirza, Michael Hawkins, Raquel Ortega, Safat Shahin, Stevani Andolo
              Votes:
              2 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: