When printing pages in portrait mode I kept getting the formatting as mobile view, stacked. I found it to be an effect of breakpoints in the tablesaw.css.
On line 417 there is a breakpoint stating:
@media (max-width: 39.9375em) {
/* Table rows have a gray bottom stroke by default */
and on line 464:
/* Media query to show as a standard table at 560px (35em x 16px) or wider */
@media (min-width: 40em) {
.tablesaw-stack tr {
display: table-row;
}
As you can see, in the comment it is stated that the breakpoint is set to 560px or 35em but the media query is set to 40em (640px).
When changing the em values I have to go as far down as 33em and 32.9375em to get the same formatting as on screen and not to have the mobile formatting kicking in.
So the breakpoint kicks in to late than the comment states and when testing it on my end the breakpoint should be even less than 35em to work properly.
It would be nice not having the mobile breakpoints not kicking in when printing from desktop, is this something that can be resolved?
Cheers,
Vigfus
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | 3059333-print-style-behavior-10.patch | 9.17 KB | mark_fullmer |
Comments
Comment #2
mark_fullmerHi Vigfus,
Thanks for reporting this -- this is a valid issue.
That said, the tablesaw.css is provided directly from the Tablesaw library -- this module has not been in the business of modifying that library.
I think the ideal place to file this would be in the library itself -- https://github.com/filamentgroup/tablesaw -- and the first thing to do would be to demonstrate that the problem exists when that library is being used on its own on a plain HTML page (rather than within Drupal).
If it isn't resolved there, the recommended solution would be to add one's own CSS to the codebase which overrides the breakpoints.
Comment #5
vigfus commentedThanks for the reply Mark,
I have already tried to override the breakpoints but some how the breakpoints stated in the tablewas.css don't get overridden properly and effect the outcome. I tested to remove all the information in the tablesaw.css, then my own overrides did the job. And not wanting to edit the original tablesaw.css inside the module I will do as you recommend and take the issue to the filamentgroups git.
Comment #6
mark_fullmerHi Vigfus,
Since there doesn't seem to be any response on the issue you posted to the original library (https://github.com/filamentgroup/tablesaw/issues/376), I'll revisit this as something we can either try to fix in the module, or provide a recipe for overriding in the theme.
Comment #7
mark_fullmerUpdate: I proceeded to test two resolutions: (1) a theme-level (i.e., end-user-driven) override that would revert the Tablesaw stylesheets in print media queries, and (2) modifications to this module to accommodate desktop-style display on print media queries. The latter is much more feasible.
Accordingly, I'll plan to make adjustments here; ideally, I suppose, the behavior of stylesheets in print view should be a setting in the module (though I also can't see many use cases for wanting standard portrait style print sizes to use the Tablesaw responsive design...
Comment #9
mark_fullmerI've provided a fix for this for the 7.x-1.x first; that version's implementation allows for a user-supplied override of the default stylesheets provided by the module, so opting out of having the portrait print stylesheet display as desktop style (new behavior) will be straightforward, & I document this in the release notes.
On to 8.x...
Comment #10
mark_fullmerThe attached patch separates out the responsive functionality into a "screen" only stylesheet, as defined in the .libraries.yml file. This would mean that the default behavior for this module, on print view, would be NOT to apply any responsive behavior.
This approach is preferable over adjusting the breakpoints as defined in the original Tablesaw module, as this would change where certain behavior happens on screen and print.
Comment #12
mark_fullmerComment #14
vigfus commentedSorry it took me so long to come back to you! I haven't been getting any notifications of the activity.
Thanks for the updates and I will try them out as soon as I can.
/ Vigfus
Comment #15
liam morlandThis change in D7 has caused #3144910: tablesaw-cell-label not appearing.