From 21a6e1f89262f88ae506deea67740b4dfecb058e Mon Sep 17 00:00:00 2001 From: MinRK Date: Fri, 24 May 2013 12:32:40 -0700 Subject: [PATCH] workaround spurious CodeMirror scrollbars always draw scrollbar margin, so that inappropriate scrollbars never overlap the last line. To compensate for the extra space, the margin between the scrollbar and the last line is shrunk significantly. --- .../static/notebook/less/codemirror.less | 24 +++++++++++++++---- .../html/notebook/static/style/style.min.css | 4 +++- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/IPython/frontend/html/notebook/static/notebook/less/codemirror.less b/IPython/frontend/html/notebook/static/notebook/less/codemirror.less index 52fe51a36..1a0271021 100644 --- a/IPython/frontend/html/notebook/static/notebook/less/codemirror.less +++ b/IPython/frontend/html/notebook/static/notebook/less/codemirror.less @@ -18,14 +18,28 @@ .CodeMirror-scroll { /* The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/ /* We have found that if it is visible, vertical scrollbars appear with font size changes.*/ - overflow-y: hidden; - overflow-x: auto; /* Changed from auto to remove scrollbar */ + /* overflow: scroll prevents scrollbars being drawn on top of the last line of the cell, */ + /* but at the expense of extra gutter at the bottom. To compensate, we shrink the margin */ + /* between the last line and the scrollbar when it's drawn. */ + overflow: scroll; + margin-bottom: -38px; /* default margin is -30px */ +} + +/* this one is needed for Text Cells to match code cells for some reason */ +.CodeMirror-wrap .CodeMirror-scroll { + overflow: scroll; +} + +/* CM sometimes draws a vertical scrollbar under zoom, but it never should in the Notebook. */ +/* this hides them - display: none would be preferable, but it gets clobbered by CodeMirror */ +.CodeMirror-vscrollbar, .CodeMirror-scrollbar-filler { + visibility: hidden; } .CodeMirror-lines { - /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */ - /* we have set a different line-height and want this to scale with that. */ - padding: 0.4em; + /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */ + /* we have set a different line-height and want this to scale with that. */ + padding: 0.4em; } .CodeMirror-linenumber { diff --git a/IPython/frontend/html/notebook/static/style/style.min.css b/IPython/frontend/html/notebook/static/style/style.min.css index b03e77570..f2ba5af4b 100644 --- a/IPython/frontend/html/notebook/static/style/style.min.css +++ b/IPython/frontend/html/notebook/static/style/style.min.css @@ -940,7 +940,9 @@ div.out_prompt_overlay{height:100%;padding:0px;position:absolute;border-radius:4 div.out_prompt_overlay:hover{-webkit-box-shadow:inset 0 0 1px #000000;-moz-box-shadow:inset 0 0 1px #000000;box-shadow:inset 0 0 1px #000000;background:rgba(240, 240, 240, 0.5);} div.output_prompt{color:darkred;margin:0 5px 0 -5px;} .CodeMirror{line-height:1.231;height:auto;background:none;} -.CodeMirror-scroll{overflow-y:hidden;overflow-x:auto;} +.CodeMirror-scroll{overflow:scroll;margin-bottom:-38px;} +.CodeMirror-wrap .CodeMirror-scroll{overflow:scroll;} +.CodeMirror-vscrollbar,.CodeMirror-scrollbar-filler{visibility:hidden;} .CodeMirror-lines{padding:0.4em;} .CodeMirror-linenumber{padding:0 8px 0 4px;} .CodeMirror-gutters{border-bottom-left-radius:4px;border-top-left-radius:4px;}