CodeMirror-gutter height doesn't size properly on init & container expends instead of scrolls

[JakobJingleheimer]

In codemirror.css:160

.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding-bottom: 30px;
  margin-bottom: -32px;
  display: inline-block;
  /* Hack to make IE7 behave */
  *zoom:1;
  *display:inline;
}

.CodeMirror-gutter would size properly with the above css, except for the following JavaScript, which overrides the height property at the element level. I can't figure out where JavaScript is getting the incorrect height—everything else inside of the .CodeMirror container is sized properly.

https://github.com/marijnh/CodeMirror/blob/master/lib/codemirror.js#L324

d.gutters.style.height = Math.max(totalHeight, d.scroller.clientHeight - scrollerCutOff) + "px";

It does correct itself as soon as the content is changed, when it becomes .CodeMirror-gutters.

[brandonwamboldt]

Any chance you could post an example of this problem occuring, using JSBin or something?

[JakobJingleheimer]

Yes, i'll try to get one together this afternoon.

: .
Jacob
frende
jacob@frende.me

[JakobJingleheimer]

Hiya, sorry I haven't had time to create an example. But just to show what's happening:

[getvictor]

I'm seeing this issue as well on 3.16 and 3.19. I have CodeMirror in a resizable div like on jsfiddle.net. When the div is resized, .CodeMirror-gutters does not get resized because it has a hardcoded element height. That element height is only updated when the whole browser window is resized.

Is there a workaround for this?

[marijnh]

Is there a workaround for this?

Yes. Call .refresh() after resizing the wrapping container.