Table overflow issue

[zishanj]

We have issue with the table layout where it get overflows the width:

moodle-mod_attendance/styles.css

Line 324 in 08cfe2b

overflow-x: initial;

needs to be removed as it overrides the overflow-x of class .table-responsive from auto to initial effecting the table responsiveness.

[danmarsden]

Hi there, what version of moodle are you using? Also please keep in mind we only test and support the core themes. If you have a problem with a 3rd party custom theme you may need to resolve this issue within your theme rather than the attendance code.

Can you reproduce the same issue with the core boost theme?

[zishanj]

Yes its boost theme on latest 4.1.1.

[danmarsden]

thanks - I can see this now when I set a background image in the boost settings - unfortunately removing the overflow-x: initial breaks the sticky header on the table (see #559) - I'm not sure if I will have time to look into this, but feel free to suggest other fixes. pinging: @t-schroeder - have you seen this before too?

thanks!

[zishanj]

Headers are already sticky with

moodle-mod_attendance/styles.css

Line 296 in 08cfe2b

position: sticky;

. We only have to include overflow-y: auto and limit the height of parent div (if its really needed) so it will make the vertical scrollbar appear.

[zishanj]

Other option is to use javascript extension for bootstrap which will detect the page scroll and makes the header sticky when its about to hide above the container.

[danmarsden]

Thanks - I'm not a fan of using JS to do this sort of thing and would prefer a css-based solution, but feel free to submit a pull request with the change for me to review!

thanks!

[t-schroeder]

Admittedly I hadn't tested this with a different background color. Another fix would be to just make the table cells non-transparent. Grader report does the same and that's a Moodle core page:

[zishanj]

@t-schroeder Grader report also have this issue and a fix is already reported. They only didn't used the responsive css class table-responsive in parent div, rest is working fine. See MDL-76827

[danmarsden]

Thanks Tim - personally I'm happy with either fix (non-transparent background) or making it restrict to the width available - although it does look visually nicer when it's restricted to the width of the parent div.

[t-schroeder]

@zishanj When I add that CSS class I lose the sticky header.

[t-schroeder]

I've made the table non-transparent as a quick improvement, but unfortunately I don't have the time to look into this further at the moment.

[danmarsden]

thanks @t-schroeder - I didn't expect you to have any time or need to fix this - just great to have your feedback! :-)