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

Modify base.html template to support optional sticky footer #1446

Closed
simonw opened this issue Aug 24, 2021 · 3 comments
Closed

Modify base.html template to support optional sticky footer #1446

simonw opened this issue Aug 24, 2021 · 3 comments
Labels
css

Comments

@simonw
Copy link
Owner

simonw commented Aug 24, 2021

The neatest way to have the footer stick to the bottom of the browser window that I've found is to use the flexbox pattern from https://css-tricks.com/couple-takes-sticky-footer/

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

I tried this in a custom plugin but it ended up having to duplicate the entire base.html template just to get a wrapper around the not-footer content.

I think Datasette's own base.html template should have this wrapper element instead.
@simonw simonw added the css label Aug 24, 2021
@simonw simonw mentioned this issue Aug 24, 2021
Closed
@simonw simonw changed the title Modify base.html template to support optional stick footer Modify base.html template to support optional sticky footer Aug 24, 2021
simonw added a commit that referenced this issue Aug 24, 2021
@simonw
Added not-footer wrapper div, refs #1446
92a99d9
@simonw
Copy link
Owner Author

simonw commented Aug 24, 2021

OK, now the following optional CSS gives us a sticky footer:

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.not-footer {
  flex: 1 0 auto;
}
footer {
  flex-shrink: 0;
}

@simonw
Copy link
Owner Author

simonw commented Aug 24, 2021

Pasting that CSS into the styles editor in the developer tools on https://latest.datasette.io/ has the desired effect: footer at the bottom of the window unless the page is too long, in which case the footer is at the bottom of the scroll.

@simonw simonw closed this as completed Aug 24, 2021
simonw added a commit that referenced this issue Aug 28, 2021
@simonw
Release 0.59a2
d3ea367 
Refs #942, #1421, #1423, #1431, #1443, #1446, #1449
@simonw
Copy link
Owner Author

simonw commented Aug 31, 2021

I used the sticky footer mechanism in datasette.app: simonw/datasette-app#3

simonw added a commit that referenced this issue Oct 14, 2021
@simonw
Release 0.59
8934507 
Refs #942, #1404, #1405, #1416, #1420, #1421, #1422, #1423, #1425, #1431, #1443, #1446, #1449, #1467, #1469, #1470, #1488
simonw added a commit that referenced this issue Oct 24, 2021
@simonw
Release 0.59
c2c9957 
Refs #942, #1404, #1405, #1416, #1420, #1421, #1422, #1423, #1425, #1431, #1443, #1446, #1449, #1467, #1469, #1470, #1488
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@simonw