Rise: Code text cutoff on wide slides

[jhrsn]

I'm sure I'm doing this incorrectly, but when I try to redefine the slide dimensions for widescreen display in the ConfigurationManager and/or set a wider % width for .container in a custom css, I can get almost what I want for all displayed elements except that code cell text in slides is cut off prior to the right edge of the displayed code cell, apparently at a set pixel width. This occurs only on slides--in the standard notebook display code lines continue to the right edge of the code cells. Is there a recommended way to allow wider displays to show longer lines in code cells?

[damianavila]

Can you post an image and probably the customization you are doing? Thanks...

[jhrsn]

On Jul 17, 2015, at 12:19 PM, Damián Avila [email protected] wrote:

Can you post an image and probably the customization you are doing? Thanks…

I’m interested in using ipython slides with wide format projectors, and also being able to display a bit longer lines of code in those displays. I can widen the cells in the slides by setting the width to higher pixel values. The content of markdown cells behaves as I would expect when I do that. The content of code cells, however, is unexpectedly cut off prior to the right margin of the cell.

In the example below I’m using ConfigManager to update the ipython profile to set the livereveal slide widths to progressively wider slides:

from IPython.html.services.config import ConfigManager
from IPython.utils.path import locate_profile
cm = ConfigManager(profile_dir=locate_profile(get_ipython().profile))
cm.update('livereveal', {'width': 1024, 'height': 700, 'margin': 0.2,})

The screen shots below are scaled to the same width, but are actually progressively wider. First, here’s a shot of the notebook. All code is visible in the code cell:

Here’s a shot of a slide with the livereveal width set to 1024. Note that some of the code lines are cut off well before the right margin of the code cell:

Here’s a shot of a slide with the livereveal width set to 1360. Note that the title no longer wraps and the code cell is also much wider. The code lines are slightly wider, but not much, and the bottom two lines are still cut off well before the right margin of the code cell.

[adl]

@jhrsn GitHub does not show any image in your last message. I suspect it doesn't handle smail attachments.

[jhrsn]

OK, let's try this again. I'm using ConfigManager as described previously to set slide widths. Below are three screenshots. The first is the notebook in normal display. The second is a slide with width set to 1024. The third is a slide with width set to 1360. Note that the markup cell becomes wider with the slide and its content uses the whole width. On the 1024 slide the code cell's text is cut off before the right margin of the code cell. On the 1360 slide, the code cell is significantly wider but its text display is only slightly wider and is cut off well before the right margin of the cell (check the last two lines).

[damianavila]

OK, now I understand the problem... probably a css thing to investigate further. Labeling as bug.

[rabernat]

Just FYI, I am experiencing this too.

[damianavila]

Yep... it needs to be addressed... as usual struggle with time, but I will try to prioritize it... obviously, PRs welcome!! :wink:

[jhrsn]

Has any progress been made on #129 since last year? Using the current version of Jupyter and a fresh install of the current RISE I see the same code text cutoff issue that is depicted in the images above. I'm putting together this summer's workshop and it would be nice if I could get past this issue. I've tried to trace the problem though the various nested css containers and I've been able to modify a variety of widths associated with code cells, but I haven't been able to find the key to specify the width of the displayed text. Any hints would be appreciated.

[damianavila]

No progress on this one, but I am trying to triage and prioritize issues this week. Thanks for the reminder.

[kevin-keraudren]

This change did it for me: https://github.com/damianavila/RISE/compare/master...kevin-keraudren:klarismo-chrome-changes#diff-6ea854b4af41eff111b88469d2cb4540L209

Basically, there is max-width: 960px !important; hardcoded as a Firefox fix.

[damianavila]

@kevin-keraudren, thanks! I will take a look soon!

[joaquinvanschoren]

For anyone else still struggling with this, here's a workaround. Just put this into any cell of your notebook and run it.

from IPython.display import HTML
HTML('''<style>.CodeMirror{min-width:100% !important;}</style>''')

[jhrsn]

The above in combination with setting .rise-enabled to something wide (1400-1500px) allows more of a wide code box to be used, but there is still excess masking of the code text on the right such that the inner padding of the right side of the code cell is still a good bit too wide.

[damianavila]

The above in combination with setting .rise-enabled to something wide (1400-1500px) allows more of a wide code box to be used, but there is still excess masking of the code text on the right such that the inner padding of the right side of the code cell is still a good bit too wide.

Thanks for the update and the info!

[mbewley]

Is it possible to remove the line max-width: 960px !important;?
Removing that fixed it for me. I'm changing my width in a CSS cell using:

<style>
.container {width: 99% !important; }
</style>

[damianavila]

Is it possible to remove the line max-width: 960px !important;?

I should test it but I guess we can do it now (it was somehow needed in the past but probably it is not longer necessary with the latest version of the notebook package).