Hello everyone,
I am taking my first steps into Jupyter Notebooks with Python (as I have worked around 90% of the time in PyCharm), and following the tutorials, I have made quite a few projects there already. I am having however, some rendering issues in GitHub when uploading some notebooks, similar to what is available in Stack Overflow: jupyter notebook display cells horizontal
After a lot of tests and troubleshooting, I have got to reach the root cause that is casing my notebooks to display in such awful way, specifically the following line of code, present in ALL of the wrongly displayed jupyter notebooks (which BTW were templates downloaded from the web):
<div class="alert alert-block alert-info" style="margin-top: 20px">
For the time being, I decided to stop using that line of code, as it does not add any utility to my programs for the time being; however now I am curious about what exactly does that line do, and why it causes such damage. I am not sure if this is the right place to ask, as some Jupyter Labs staff (?) has already dismissed responsibilty about this issue: github issue 5323
Thanks for your help and kind comments, hope someone can provide me some hint.
Does the issue happen when you use nbviewer? You didn’t post a link so I couldn’t test.
The JupyterLab developers didn’t dimiss responsibility. They pointed out what tools folks should be using in the Jupyter ecosystem. Jupyter provides nbviewer and hosts it for sharing static renderings of your notebooks. It is more mature and preferable to GitHub’s rendering in many ways. Just point nbviewer at your Github page. In case you didn’t know, Github only added any stable rendering in the last few years. Before that, it would try and time out so often it was unusable so that way most people quickly found the better nbviewer way the way to share static notebooks.
For example of other deficiencies of Github supporting features of notebooks, see this notebook. If you go to Github for that notebook (see it here), the expandable section doesn’t even show. Additionally, all sorts of interactive javascript renders on nbviewer but not at Github.
You can easily adapt the GitHub URL to point nbviewer at your page and share that URL with folks.
If you need GitHub’s renderer to handle it, you’d have to take it up with them, which is what the Jupyter developer was pointing out.
I often just place in the top of the notebook where it is best viewed with a link to the nbviewer page. You’ll see a note in the notebook example above.
To answer your question about that your line of code does, it is changing the css style of setting for margins and for some reason this affects something Github uses. Keep in mind that Github renders many types of files. Many more types of files than nbviewer has to handle, and so the Github developers have many more constraints under which they are operating. In other words, they have to tolerate more edge cases that break things so they can insure most things work.
1 Like
Hello there, and thanks for your quick reply and time,
Ok, let’s provide feedback about some of your comments and requests:
- Thanks for clarifying the position of the developer pointed in my original post. It was quick and maybe that’s why it got misunderstood.
- For the purposes of testing the issue, I have sent the exact same notebook, but with and without the faulty code (please find it at the very beginning of the code, it is the THIRD cell).
- As suggested, I have tried nbviewer with the faulty notebook provided before, and unfortunately, it does nothing to solve / improve the issue (cells are still displayinh “horizontally”).
- The other explanatory info regarding GiHub and their renders was insightfull too.
Well, there you go. Hope it helps to dig a bit deeper in this case.
Thanks a lot!
Thanks for confirming this indeed happens with nbviewer as well. I think that is a big missing link in the issue that was filed, which you linked in your original post.
They way it is discussed and the thread ended, it implies that it is only an issue on GitHub. At least others may now come here and see the issue is not restricted to just Github.
However, I imagine one could argue this is a feature and not a bug. The code you point out adjusts the css and both Github and nbviewer are respecting what you changed. If it didn’t let you manage css, lots of other abilities expected by people would break. It just so happens, that margin-top causes a problem in nbviewer and Github rendering but is fine in a notebook.
So I think the question then becomes how can a user achieve the same result but it be supported in the nbviewer and github rendering? And then we offer that solution and hope that gets adopted by folks?
I believe the goal is to have the text highlighted in a blue box?
I would suggest it should simply be the following:
<div class="alert alert-block alert-info" >
Can you try changing it to that and see if it fixes it? I think that does well enough what was trying to be accomplished there, right?
I believe it will work because I have used something similar:
Example, the code for the first cell here has a similar line where the alert-info is replaced by alert-warning.
And it renders fine at GitHub, see here.
Full disclosure: I borrowed that blurb and alert approach to highlight it from Tim Sherratt’s notebook here.
1 Like
I encountered the same problem (which was very frustrating!). After some troubleshooting (thanks to folks commenting and posting solutions here!) I found that in my notebooks, changing the div class contents was not the issue, but rather that my divs did not have close statements.
IE. When I added </div> to the end of each block I had a <div class = "contents here">, then they rendered correctly (regardless of what css or classes were declared). Apologies I can’t share an example, as these are instructor-keys for a university course.
Cheers!
1 Like
The cells displaying horizontally upon export / conversion of the notebook to HTML came up as an issue for someone recently who is using HTML to style markdown cells & posted at Stack Overflow. In a reply, I suggested some options that relate to the topic of this thread, and so I’m going to link to from here to my offered options at StackOverflow.