Snippets scroll slightly on mouseover + scroll...

1

I’m using code mirror to add HTML and JS snippets for a UI style guide. When the mouse is over the div containing a snippet the snippet will move up or down slightly depending on scroll direction.

HTML looks like this:

<pre><code class="code">
<div class="alert alert-message alert-success" role="alert">
    <i class="alert-message-icon"></i>Sucess
</div>
<div class="alert alert-message alert-info" role="alert">
    <i class="alert-message-icon"></i>Info
</div>
<div class="alert alert-message alert-warning" role="alert">
    <i class="alert-message-icon"></i>Warning
</div>
<div class="alert alert-message alert-danger" role="alert">
    <i class="alert-message-icon"></i>Danger
</div>

and the JS looks like this:

$('.code').each(function() {

                var $this = $(this),
                    $code = $this.html();

                $this.empty();

                var myCodeMirror = CodeMirror(this, {
                    value: $code,
                    mode: 'xml',
                    lineNumbers: false,
                    readOnly: true,
                    lineWrapping: true
                });
            });

Any help getting rid of the wobble would be greatly appreciated!

2

Which browser is this happening in? Are the snippets scrollable? Are they fixed-height or content-height? Does this also happen for you in any of the demos on codemirror.net ?

3

Marjin - thanks for the help. I figured out the issue which involved a small CSS change.

4

@Dadsaster what was your CSS change?

I’m having a similar issue when the editor is inside a fixed height container it initialized partially scrolled down the screen.

I sense it’s an CSS issue, but can’t confirm.