Header and footer overlapped by slide content

[nikita-mo]

I was trying to create a presentation with a header and footer. However, the header and footer are apparently not recognized as content of the slide, which results in the content either overlapping with the header or footer. Here is my CSS and HTML code I input to the overlay option.

.header{
  text-align: left;
  display: inline-block;
  vertical-align: middle;
  line-height: 32pt;
  color: black;
  font-family: calibri;
  border-bottom: 2.25pt solid #4f81bd;
  width: 85%;
  right: 0;
  left: 0;
  position: fixed;
  margin: auto;
  padding: 30px 30px 5px 30px;
}


.footer {
  margin: auto;
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  width: 85%;
  border-top: 2.25pt solid #f79646;
  color: #7F7F7F;
  font-family: calibri;
  font-size: 12pt;
  text-align: center;
}

.rise-enabled #notebook-container {
  margin-top: 140px;
}

<div class="header"><img src="logo-links.png" width='150px' padding='20px' align='left'/> <hf1>Basic methods for energy modelling and optimization in Python</hf1><img src="logo-rechts.png" width='100px' padding='20px' align='right'/><br/> <hf2>Numpy & Pandas</hf2></div><div class="footer"><p>Zentrum für nachhaltige Energiesysteme (ZNES)</p></div>

So far I've managed to add a margin on top which solves the overlapping with the header. For the footer on the other hand I couldn't find the right element to change. I added the scroll option, but the content is still stretching to the bottom of the slide, overlapping with the footer.

I tried looking for the right container to change in my css file but nothing worked. Is there a way to add margin to the bottom as well or set the height of the content of the slide so that there is no overlapping anymore, but I can still scroll normally?

Any help is appreciated!

Thank you

Nikita

[parmentelat]

Hi

IIUC you would expect the scrollable area to take the amount of space between the footer and header
unfortunately that's not the case; the thing is, the header/footer business came after the scroll business, and the latter was not properly tweaked
regardless, the fact is that in the current version the scroll area gets sized with a hardwired '95vh':
https://github.com/damianavila/RISE/blob/master/classic/rise/static/main.js#L378

it seems easy to make this customizable somehow; I'll try to implement this in the not-too-distant future

[parmentelat]

I will publish this as a pip-installable version

[parmentelat]

Hi, you may give this a try if you do this

pip install -U --pre rise

which should give you release 5.7.2.dev0

and with that version in place, you will have the ability to set the height of the scroll area:
add in your rise.css or other mynotbeook.css something along these lines:

/* make sure to pick a selector that is strictly 
    more selective than just .rise-scroll 
    because that's what main.css uses already
*/
section.rise-scroll {
    margin-top: 100px;  /* a bit more than should match the header size */
    height: 85vh;           /* to leave some space below for the footer */
}

Here I say I want to keep 100px for the header, and that the scroll-area is to take 85% of the viewport height

please let me know if that suits your needs

[nikita-mo]

Thanks for the quick fix!

It seems to work very well now for slides with cells that are too long and scrolling is activated.

However, if a slide is okay length-wise and scolling is not activated, the margin from section.rise-scroll doesn't work.

If I put a margin to #notebook-container, the margin is doubled for slides with the scroll activated.

.rise-enabled #notebook-container { padding-top: 140px; }

Also If I only activate the #notebook-container margin, the calculation of the height doesn't seem to work and the scroll is not activated correctly

Is this easy to fix with just CSS and I just miss something?
Appreciate your help!

[parmentelat]

However, if a slide is okay length-wise and scolling is not activated, the margin from section.rise-scroll doesn't work.

you meant height-wise here, right ?

indeed there was a provision in the code here
https://github.com/damianavila/RISE/blob/master/classic/rise/static/main.js#L375
that applied the scrolling only on slides that needed it

and so my patch adds the 'rise-scroll' class only on those
which obviously is still not quite right

would it be possible for you to share the slides (or a representative selection thereof) if they're not sensitive ?
or better still, if you can tweak the new example that I wrote in this notebook
https://github.com/damianavila/RISE/blob/master/examples/header-footer-scroll.ipynb
so that it shows your issue

this way we could be sure to nail it down..

@damianavila
you were the one to implement the scroll feature in the first place; is there any caveat in setting the rise-scroll class unconditionally if the scroll feature has been selected ? I'm thinking the way it is done right now is brittle, as a cell height is likely to change after cells evaluation, right ?

[parmentelat]

all this being said, clearly the way we implemented the header-footer business in the first place could very fruitfully be revised by using a grid display to layout the 3 parts (header/body/footer) in a much less awkward way...

[nikita-mo]

would it be possible for you to share the slides (or a representative selection thereof) if they're not sensitive ?
or better still, if you can tweak the new example that I wrote in this notebook
https://github.com/damianavila/RISE/blob/master/examples/header-footer-scroll.ipynb
so that it shows your issue

I tweaked the example notebook so that the issues are reproduced. I commited my changes just now to the issue610 branch.
Also, I forgot to mention that I disabled the center option.

If pulled as is, you can see that the header is overlapping.

For my case now, if the rise-scroll margin is deactivated, but the #notebook-container margin is activated, slide 3 barely fits the screen and thus the scrollbar is not activated. You might have to add/remove some lines depending on your screen.

all this being said, clearly the way we implemented the header-footer business in the first place could very fruitfully be revised by using a grid display to layout the 3 parts (header/body/footer) in a much less awkward way...

Yea, that would be a pretty neat option in the future!

[parmentelat]

hi
I can't see your pushed commit, because of course you must have pushed it onto a fork of some kind, right ?
in any case I'm going to need you to tell me more about where I can find these tweaks

[nikita-mo]

hi,

sorry I'm not too familiar with a public git yet so I don't really understand how I am able to push since I do not have permissions obviously.
I uploaded the two files in the cloud here.

[parmentelat]

hey

here's how it works

• you create your own fork (go to damian's repo, and click the Fork thingy
  
  this will create a clone on the github side, but you will have permissions on that one
• from that repo then, copy the URL and use it to add a remote in your local repo on your laptop
  git add remote mine <the-url>
  preferably using the SSH url unless you know how to deal with the awkward token-based http authentication
• you can then push your stuff onto that fork with e.g.
  git push mine your-branch
  iiuc your-branch would read issue610

at that point you would create a PR to ask us to merge your branch; that is not strictly mandatory though if you're not familiar with the PR process, as from that point on I can pull from your fork and take it from there

let me know if you need more clues

[parmentelat]

Hi
I've published a dev release 5.7.2.dev1 that I believe should work best in your use case
the issue was primarily caused by using scroll+nocenter together
please give it a try (install withpip install --pre rise)