Skip to content
Browse files

Modify the vertical sizing model once more

Fixes a problem where the editor would always be 30 pixels smaller
than its set height.

The height is now set on the outer wrapper DIV again, and some
height: 100% tricks are used to make height information flow
both ways (inside-out in demo/resize.html mode, outside-in in
normal, fixed-height mode).

Closes #775
  • Loading branch information...
1 parent c09b348 commit 288504cdeaf85a402c18a0219da9216d627f87b2 @marijnh marijnh committed
Showing with 49 additions and 42 deletions.
  1. +4 −1 demo/complete.html
  2. +3 −3 demo/fullscreen.html
  3. +7 −3 demo/resize.html
  4. +4 −1 demo/xmlcomplete.html
  5. +10 −17 doc/manual.html
  6. +6 −4 lib/codemirror.css
  7. +4 −3 lib/codemirror.js
  8. +1 −1 mode/less/index.html
  9. +2 −2 mode/vb/index.html
  10. +8 −7 test/test.js
View
5 demo/complete.html
@@ -10,7 +10,10 @@
<script src="../lib/util/javascript-hint.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">.CodeMirror {border: 1px solid #eee;} .CodeMirror-scroll { height: 100% }</style>
+ <style type="text/css">
+ .CodeMirror { border: 1px solid #eee; height: auto; }
+ .CodeMirror-scroll { overflow-y: hidden; overflow-x: auto; }
+ </style>
</head>
<body>
<h1>CodeMirror: Autocomplete demo</h1>
View
6 demo/fullscreen.html
@@ -111,14 +111,14 @@
return window.innerHeight || (document.documentElement || document.body).clientHeight;
}
function setFullScreen(cm, full) {
- var wrap = cm.getWrapperElement(), scroll = cm.getScrollerElement();
+ var wrap = cm.getWrapperElement();
if (full) {
wrap.className += " CodeMirror-fullscreen";
- scroll.style.height = winHeight() + "px";
+ wrap.style.height = winHeight() + "px";
document.documentElement.style.overflow = "hidden";
} else {
wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
- scroll.style.height = "";
+ wrap.style.height = "";
document.documentElement.style.overflow = "";
}
cm.refresh();
View
10 demo/resize.html
@@ -11,9 +11,9 @@
<style type="text/css">
.CodeMirror {
border: 1px solid #eee;
+ height: auto;
}
.CodeMirror-scroll {
- height: auto;
overflow-y: hidden;
overflow-x: auto;
}
@@ -23,11 +23,15 @@
<h1>CodeMirror: Autoresize demo</h1>
<form><textarea id="code" name="code">
-.CodeMirror-scroll {
+.CodeMirror {
+ border: 1px solid #eee;
height: auto;
+}
+.CodeMirror-scroll {
overflow-y: hidden;
overflow-x: auto;
-}</textarea></form>
+}
+</textarea></form>
<p>By setting a few CSS properties, CodeMirror can be made to
automatically resize to fit its content.</p>
View
5 demo/xmlcomplete.html
@@ -11,7 +11,10 @@
<script src="../lib/util/xml-hint.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">.CodeMirror {border: 1px solid #eee;} .CodeMirror-scroll { height: 100% }</style>
+ <style type="text/css">
+ .CodeMirror { border: 1px solid #eee; height: auto; }
+ .CodeMirror-scroll { overflow-y: hidden; overflow-x: auto; }
+ </style>
</head>
<body>
<h1>CodeMirror: XML Autocomplete demo</h1>
View
27 doc/manual.html
@@ -443,16 +443,18 @@ <h2 id="styling">Customized Styling</h2>
<dl>
<dt id="class_CodeMirror"><code>CodeMirror</code></dt>
<dd>The outer element of the editor. This should be used for the
- editor width, borders and positioning. Can also be used to set
- styles that should hold for everything inside the editor (such
- as font and font size), or to set a background.</dd>
+ editor width, height, borders and positioning. Can also be used
+ to set styles that should hold for everything inside the editor
+ (such as font and font size), or to set a background.</dd>
<dt id="class_CodeMirror_scroll"><code>CodeMirror-scroll</code></dt>
- <dd>This determines the editor's height, and whether the editor
- scrolls (<code>overflow: auto</code> + fixed height). By
- default, it does. Giving this <code>height: auto; overflow:
- visible;</code> will cause the editor to resize to fit its
- content.</dd>
+ <dd>Whether the editor scrolls (<code>overflow: auto</code> +
+ fixed height). By default, it does. Setting
+ the <code>CodeMirror</code> class to have <code>height:
+ auto</code> and giving this class <code>overflow-x: auto;
+ overflow-y: hidden;</code> will cause the editor
+ to <a href="../demo/resize.html">resize to fit its
+ content</a>.</dd>
<dt id="class_CodeMirror_focused"><code>CodeMirror-focused</code></dt>
<dd>Whenever the editor is focused, the top element gets this
@@ -492,15 +494,6 @@ <h2 id="styling">Customized Styling</h2>
<dd>These are used to style matched (or unmatched) brackets.</dd>
</dl>
- <p id="css-resize">So note carefully that, in order to resize the
- editor, you should set a <code>width</code> on
- the <a href="#getWrapperElement">wrapper</a>
- (class <code>CodeMirror</code>) element, and a height on
- the <a href="#getScrollerElement">scroller</a>
- (class <code>CodeMirror-scroll</code>) element.
- The <a href="#setSize"><code>setSize</code></a> method is the best
- way to dynamically change size at runtime.</p>
-
<p>The actual lines, as well as the cursor, are represented
by <code>pre</code> elements. By default no text styling (such as
bold) that might change line height is applied. If you do want
View
10 lib/codemirror.css
@@ -1,12 +1,12 @@
/* BASICS */
.CodeMirror {
- /* Set width, borders, and global font properties here */
+ /* Set height, width, borders, and global font properties here */
font-family: monospace;
+ height: 300px;
}
.CodeMirror-scroll {
- /* Set height and scrolling behaviour here */
- height: 300px;
+ /* Set scrolling behaviour here */
overflow: auto;
}
@@ -113,10 +113,12 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
/* 30px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror, and the paddings in .CodeMirror-sizer */
margin-bottom: -30px; margin-right: -30px;
+ border: 0px solid white;
+ border-right-width: 30px; border-bottom-width: 30px;
+ height: 100%;
outline: none; /* Prevent dragging from highlighting the element */
}
.CodeMirror-sizer {
- padding: 0 30px 30px 0; /* Scrollbar-hiding hack */
position: relative;
}
View
7 lib/codemirror.js
@@ -195,7 +195,7 @@ window.CodeMirror = (function() {
return /^\d+$/.test(val) ? val + "px" : val;
}
if (width != null) wrapper.style.width = interpret(width);
- if (height != null) scroller.style.height = interpret(height);
+ if (height != null) wrapper.style.height = interpret(height);
instance.refresh();
},
connect: function(type, f) {connect(this, type, f);},
@@ -1032,10 +1032,10 @@ window.CodeMirror = (function() {
var pt = paddingTop();
y1 += pt; y2 += pt;
var screen = scroller.clientHeight - scrollerCutOff, screentop = scroller.scrollTop, result = {};
- var docBottom = scroller.scrollHeight;
+ var docBottom = scroller.scrollHeight - scrollerCutOff;
var atTop = y1 < pt + 10, atBottom = y2 + pt > docBottom - 10;
if (y1 < screentop) result.scrollTop = atTop ? 0 : Math.max(0, y1);
- else if (y2 > screentop + screen) result.scrollTop = (atBottom ? docBottom : y2) - screen;
+ else if (y2 > screentop + screen) result.scrollTop = (atBottom ? docBottom : y2 - screen);
var screenw = scroller.clientWidth - scrollerCutOff, screenleft = scroller.scrollLeft;
x1 += gutters.offsetWidth; x2 += gutters.offsetWidth;
@@ -1065,6 +1065,7 @@ window.CodeMirror = (function() {
showingFrom = showingTo = displayOffset = 0;
return;
}
+
// Compute the new visible window
// If scrollTop is specified, use that to determine which lines
// to render instead of the current scrollbar position.
View
2 mode/less/index.html
@@ -7,7 +7,7 @@
<script src="../../lib/codemirror.js"></script>
<script src="../../lib/util/matchbrackets.js"></script>
<script src="less.js"></script>
- <style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd; font-size:12px} .CodeMirror-scroll {height: 400px}</style>
+ <style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd; font-size:12px; height: 400px}</style>
<link rel="stylesheet" href="../../doc/docs.css">
<link rel="stylesheet" href="../../theme/lesser-dark.css">
</head>
View
4 mode/vb/index.html
@@ -8,8 +8,8 @@
<link rel="stylesheet" href="../../doc/docs.css">
<link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
<style>
- .CodeMirror {border: 1px solid #aaa; height:210px;}
- .CodeMirror-scroll { overflow-x: auto; height: 100%;}
+ .CodeMirror {border: 1px solid #aaa; height:210px; height: auto;}
+ .CodeMirror-scroll { overflow-x: auto; overflow-y: hidden;}
.CodeMirror pre { font-family: Inconsolata; font-size: 14px}
</style>
<script type="text/javascript" src="../../lib/util/runmode.js"></script>
View
15 test/test.js
@@ -333,7 +333,7 @@ testCM("scrollSnap", function(cm) {
cm.setCursor({line: 100, ch: 180});
cm.setCursor({line: 199, ch: 0});
info = cm.getScrollInfo();
- is(info.left == 0 && info.top > info.height - 100, "scrolled clean to bottom");
+ is(info.left == 0 && info.top + 2 > info.height - cm.getScrollerElement().clientHeight, "scrolled clean to bottom");
});
testCM("selectionPos", function(cm) {
@@ -410,14 +410,15 @@ testCM("weirdLinebreaks", function(cm) {
testCM("setSize", function(cm) {
cm.setSize(100, 100);
- is(cm.getWrapperElement().offsetWidth, 100);
- is(cm.getWrapperElement().offsetHeight, 100);
+ var wrap = cm.getWrapperElement();
+ is(wrap.offsetWidth, 100);
+ is(wrap.offsetHeight, 100);
cm.setSize("100%", "3em");
- is(cm.getWrapperElement().style.width, "100%");
- is(cm.getScrollerElement().style.height, "3em");
+ is(wrap.style.width, "100%");
+ is(wrap.style.height, "3em");
cm.setSize(null, 40);
- is(cm.getWrapperElement().style.width, "100%");
- is(cm.getScrollerElement().style.height, "40px");
+ is(wrap.style.width, "100%");
+ is(wrap.style.height, "40px");
});
testCM("hiddenLines", function(cm) {

0 comments on commit 288504c

Please sign in to comment.
Something went wrong with that request. Please try again.