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.

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

Firefox cuts off right hand side by 1px #16

Closed
nolanhergert opened this Issue Mar 10, 2015 · 4 comments

Comments

Projects
None yet
3 participants
@nolanhergert

nolanhergert commented Mar 10, 2015

I am noticing that in Firefox Ubuntu the div.inner_cell is a few pixels too short, cutting off the end of the row of words and is visually distracting. I notice that other notebooks (from other books) don't have this issue, even though they seem to share the same .css files! But, your font is different than the linked example, so something must be different when you compile it. I can't tell from a first glance of the HTML what is different though.

Looks like a great book otherwise. Gotta tear into it :)

@rlabbe

This comment has been minimized.

Owner

rlabbe commented Mar 10, 2015

I've seen the same thing in Chrome in all the notebooks. This just started happening since the release of IPython 3.0.0 (I think). I haven't had a chance to look into it, but will now.

@pquentin

This comment has been minimized.

Contributor

pquentin commented Apr 4, 2015

The issue itself is quite simple, but it's easy to get confused amidst all the divs and CSS rules. A notebook is a collection of .cell, each one containing a .prompt on the left and an .inner_cell on the right (the actual content). (This is done with flex instead of the usual floats, but this is not relevant here.)

Each .cell has a width of 850px, and each .prompt has a width of... 14ex (126px in my browser, but this is font-size dependant). That leaves 724px for the .inner_cell. But each .inner_cell has a width of 750px (defined in .text_cell_render, their child)! With normal CSS rules, the remaining 26px should overflow on the right, but a recent IPython commit added this:

@-moz-document url-prefix() {
  div.inner_cell {
    overflow-x: hidden;
  }
}

This is the reason why the bug is Firefox-only. rlabbe, you say you've seen this elsewhere, but if this is true, it's probably another bug. Anyway, to fix the issue, you can either:

  1. remove the 750px width on .text_cell_render: this will reduce the text width to respect the global 850px limit
  2. or remove the 850px width on .cell: this will make the text wider than intended, as it is displayed in Chrome right now, and as it was displayed in Firefox before IPython 3.1.

I can send a pull request if you wish. Thanks!

@rlabbe

This comment has been minimized.

Owner

rlabbe commented Apr 6, 2015

I've made this change and it works. Thank you for your detailed description; I know about nothing about CSS.

@rlabbe rlabbe closed this Apr 6, 2015

rlabbe added a commit that referenced this issue Apr 7, 2015

Fix for github issue #16
The CSS was causing the text bounding box to slightly overlap the
text. A kind person explained the problem by posting to issue 16.

However, his change didn't work. I removed the width field and for
some reason all the headings centered themselves. I tried changing
their alignment and that didn't work. I comprimised by changing 750
to 540 and that worked.

I also slightly changed the font size. It was almost comically large.
@rlabbe

This comment has been minimized.

Owner

rlabbe commented Apr 7, 2015

Hmm, removing the width made all the heading center themselves. No idea why, or inclination to debug. I've reduced the 750 to 740 and it seems to be working. Just pushed to github. I'll reopen and try to get it right if anyone reports further problems

pquentin added a commit to pquentin/Kalman-and-Bayesian-Filters-in-Python that referenced this issue May 4, 2015

rlabbe added a commit that referenced this issue May 20, 2015

Merge pull request #35 from pquentin/master
Fix issue #16 properly without centered headers

rlabbe added a commit that referenced this issue May 20, 2015

Fix for github issue #16
The CSS was causing the text bounding box to slightly overlap the
text. A kind person explained the problem by posting to issue 16.

However, his change didn't work. I removed the width field and for
some reason all the headings centered themselves. I tried changing
their alignment and that didn't work. I comprimised by changing 750
to 540 and that worked.

I also slightly changed the font size. It was almost comically large.

rlabbe added a commit that referenced this issue May 20, 2015

Merge pull request #35 from pquentin/master
Fix issue #16 properly without centered headers
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment