Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

text lines at the bottom are covered by 'skip to main content' while print a page #1745

Closed
berlin2123 opened this issue Mar 21, 2024 · 2 comments · Fixed by #1770
Closed

text lines at the bottom are covered by 'skip to main content' while print a page #1745

berlin2123 opened this issue Mar 21, 2024 · 2 comments · Fixed by #1770
Labels
kind: bug Something isn't working

Comments

@berlin2123
Copy link
Contributor

berlin2123 commented Mar 21, 2024 •
edited
Loading

I first discovered this issue in sphinx-book-theme:
executablebooks/sphinx-book-theme#828

The same issue in pydata-sphinx-theme, while print a page by Ctrl + P.
lines at the bottom may be covered by 'skip to main content' in some pages of print.

You can see the screenshot in executablebooks/sphinx-book-theme#828 or jupyter-book/jupyter-book#2045
@berlin2123
Copy link
Contributor Author

berlin2123 commented Mar 21, 2024 •
edited
Loading

Temporary solution:
Add the following into custem.css, see how to add.
It seems disabled the skip-link.

/* fix: ship to main content while print webpage */
.skip-link {
    position: absolute;
}

@drammock
Copy link
Collaborator

drammock commented Apr 9, 2024

based on a quick search, seems like adding CSS rules under @media print (and ideally isolating them in in a dedicated stylesheet) is the recommended approach:

Carreau added a commit to Carreau/pydata-sphinx-theme that referenced this issue Apr 15, 2024
@Carreau
MAINT: various fixes to print CSS.
f60c972 
This should among other fix pydata#1745

When printing this hides
 - The pydata navbar
 - The announcement banner.
 - The "skip to main content" link.
 - The location breadcrumbs

This does not hide the version warning banner as this is currently being
worked on in another PR.

I went the route of adding the bootstrat `d-print-none`, instead of
adding custom css rules, I'm happy to do the opposite, but it seem the
using bootstrap classes as that seems what is done in other places.

I've also added a  break-inside avoid in a few places, mostly to try-to
avoid page breaks in the middle of codeblocks.
@Carreau Carreau mentioned this issue Apr 15, 2024
Merged
Carreau added a commit to Carreau/pydata-sphinx-theme that referenced this issue Apr 17, 2024
@Carreau
MAINT: various fixes to print CSS.
8777744 
This should among other fix pydata#1745

When printing this hides
 - The pydata navbar
 - The announcement banner.
 - The "skip to main content" link.
 - The location breadcrumbs (in bd-header-article), without also hiding
   the container the full content is shifted by a dozen pixel hight and
   the end of the content get hidden behind the footer when printing.
 - The prev.next buttons a bottom of page.

This does not hide the version warning banner as this is currently being
worked on in another PR.

I went the route of adding the bootstrat `d-print-none`, instead of
adding custom css rules, I'm happy to do the opposite, but it seem the
using bootstrap classes as that seems what is done in other places.

I've also added a  break-inside avoid in a few places, mostly to try-to
avoid page breaks in the middle of codeblocks.
@trallard trallard added the kind: bug Something isn't working label Apr 18, 2024
Carreau added a commit to Carreau/pydata-sphinx-theme that referenced this issue Apr 23, 2024
@Carreau
MAINT: various fixes to print CSS.
15ba47f 
This should among other fix pydata#1745

When printing this hides
 - The pydata navbar
 - The announcement banner.
 - The "skip to main content" link.
 - The location breadcrumbs (in bd-header-article), without also hiding
   the container the full content is shifted by a dozen pixel hight and
   the end of the content get hidden behind the footer when printing.
 - The prev.next buttons a bottom of page.

This does not hide the version warning banner as this is currently being
worked on in another PR.

I went the route of adding the bootstrat `d-print-none`, instead of
adding custom css rules, I'm happy to do the opposite, but it seem the
using bootstrap classes as that seems what is done in other places.

I've also added a  break-inside avoid in a few places, mostly to try-to
avoid page breaks in the middle of codeblocks.
@blakeNaccarato blakeNaccarato mentioned this issue Apr 30, 2024
Open
5 tasks
Carreau added a commit to Carreau/pydata-sphinx-theme that referenced this issue May 2, 2024
@Carreau
MAINT: various fixes to print CSS.
b9f9033 
This should among other fix pydata#1745

When printing this hides
 - The pydata navbar
 - The announcement banner.
 - The "skip to main content" link.
 - The location breadcrumbs

This does not hide the version warning banner as this is currently being
worked on in another PR.

I went the route of adding the bootstrat `d-print-none`, instead of
adding custom css rules, I'm happy to do the opposite, but it seem the
using bootstrap classes as that seems what is done in other places.

I've also added a  break-inside avoid in a few places, mostly to try-to
avoid page breaks in the middle of codeblocks.
@drammock drammock mentioned this issue May 3, 2024
Open
@d33bs d33bs mentioned this issue May 9, 2024
Merged
13 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
kind: bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

MAINT: various fixes to print CSS. Carreau/pydata-sphinx-theme
3 participants
@drammock @trallard @berlin2123