Set overflow-x to auto of figure only on screen about simple.css HOT 2 CLOSED

I looked at adding a media query to make the table overflow visible for print, but unfortunately it results in a worse experience with elements that are wide enough to overflow off the screen—the part of the element that does not fit on the page gets cut off.

details elements need to be manually opened by the user prior to printing, there is no way to open them without JavaScript. We should hold the same for figure. Keeping overflow-x: auto on the figure element for print would allow the user to scroll the part of the element they want on the page into view. Without it, they have no recourse other than copy and paste for large elements.

See below for pages from the print preview. The left page has scrolling disabled, and the right page uses the current version of Simple.css with the table scrolled to the right. I’ve manually opened the details element below it.

If you’d like to override this behavior yourself with custom CSS, here’s the code:

@media print {
  figure {
    overflow-x: visible;
  }
}

from simple.css.

H @lkhrs,

thanks for looking into this. My idea was not to only set overflow-x to initial, because, as you say, it will cut of the content and you have no control over the content, when you print it. I would add width: 100% to figure > table, so it takes the full space and the columns are aligned automatically.

Thanks for explaining the details`-Element. I was not using this element currently and didn’t know, that it is not print-ready. So this element should not be used, if you plan to support printing of the site.

Regards, Manuel

from simple.css.