Weird behaviour with CodeMirror2 and jQueryUI tabs

marijnh commented

2011-04-21 11:44:35 +02:00

(Migrated from gitlab.com)

I am having a bit of an issue using CodeMirror in a jQueryUI tab component. I am using Ubuntu 10.10 and the behaviour is present in both Chrome 10.0.648.204 and Firefox 3.6.16.

To reproduce, put the code below in a local .html file, run it in a browser and do the following:

click the 'run' button.
click on tab2

the codemirror editor appears empty

hover your mouse pointer over the beginning of the first line, until it becomes an I-beam (the cursor where you can edit).
click and drag to select text
the text suddenly appears!

If you uncomment the two commented lines, the problem disappears, but somehow it doesn't seem like an elegant solution.

<html>
    <head>
        <script src="https://github.com/marijnh/CodeMirror2/raw/master/lib/codemirror.js"></script> 
        <script src="https://github.com/marijnh/CodeMirror2/raw/master/mode/javascript/javascript.js"></script> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.js"></script>

        <link type="text/css" 
              href="http://jquery-ui.googlecode.com/svn/tags/1.8.11/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />  
        <link rel="stylesheet" href="https://github.com/marijnh/CodeMirror2/raw/master/lib/codemirror.css">
        <link rel="stylesheet" href="https://github.com/marijnh/CodeMirror2/raw/master/mode/javascript/javascript.css">

        <script>
            function run(){
                //$("#tabs").tabs( "select" , 1 );
                editor.setValue('123\n456\n789\n');
                alert("CodeMirror Editor value is:\n" + editor.getValue());
                //$("#tabs").tabs( "select" , 0 );
            }
        </script>
    </head>
    <body>
        <script>
            $(function() {
                editor = CodeMirror.fromTextArea(document.getElementById("tab2Area"), {
                    lineNumbers: true,
                    matchBrackets: true
                });

                $("#tabs").tabs();
            });
        </script>

        <div id="tabs">
            <ul>
                <li><a href='#tab1'>tab1</a></li>
                <li><a href='#tab2'>tab2</a></li>
            </ul>
            <div id="tab1">
                <input type="button" value="run"  onClick="run()">
            </div>
            <div id='tab2'>
                <textarea id="tab2Area" rows="15" cols="136"></textarea>
            </div>
        </div>
    </body>
</html>

I am having a bit of an issue using CodeMirror in a jQueryUI tab component. I am using Ubuntu 10.10 and the behaviour is present in both Chrome 10.0.648.204 and Firefox 3.6.16. To reproduce, put the code below in a local .html file, run it in a browser and do the following: 1. click the 'run' button. 2. click on tab2 the codemirror editor appears empty 1. hover your mouse pointer over the beginning of the first line, until it becomes an I-beam (the cursor where you can edit). 2. click and drag to select text 3. the text suddenly appears! If you uncomment the two commented lines, the problem disappears, but somehow it doesn't seem like an elegant solution. ``` <html> <head> <script src="https://github.com/marijnh/CodeMirror2/raw/master/lib/codemirror.js"></script> <script src="https://github.com/marijnh/CodeMirror2/raw/master/mode/javascript/javascript.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.js"></script> <link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/1.8.11/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> <link rel="stylesheet" href="https://github.com/marijnh/CodeMirror2/raw/master/lib/codemirror.css"> <link rel="stylesheet" href="https://github.com/marijnh/CodeMirror2/raw/master/mode/javascript/javascript.css"> <script> function run(){ //$("#tabs").tabs( "select" , 1 ); editor.setValue('123\n456\n789\n'); alert("CodeMirror Editor value is:\n" + editor.getValue()); //$("#tabs").tabs( "select" , 0 ); } </script> </head> <body> <script> $(function() { editor = CodeMirror.fromTextArea(document.getElementById("tab2Area"), { lineNumbers: true, matchBrackets: true }); $("#tabs").tabs(); }); </script> <div id="tabs"> <ul> <li><a href='#tab1'>tab1</a></li> <li><a href='#tab2'>tab2</a></li> </ul> <div id="tab1"> <input type="button" value="run" onClick="run()"> </div> <div id='tab2'> <textarea id="tab2Area" rows="15" cols="136"></textarea> </div> </div> </body> </html> ```

marijnh commented

2011-04-21 11:49:19 +02:00

(Migrated from gitlab.com)

Try calling .refresh() on the CodeMirror instance after un-hiding it.

marijnh commented

2011-04-21 11:56:25 +02:00

(Migrated from gitlab.com)

If I change the tab initialization to something like this:

$("#tabs").tabs({
   show: function(event, ui) { editor.refresh(); }
});

it works. I could probably make that a bit more specific to the tab with the editor. But is this the best way to solve this?

If I change the tab initialization to something like this: ``` javascript $("#tabs").tabs({ show: function(event, ui) { editor.refresh(); } }); ``` it works. I could probably make that a bit more specific to the tab with the editor. But is this the best way to solve this?

marijnh commented

2011-04-21 11:57:56 +02:00

(Migrated from gitlab.com)

Yes, this is the way to handle this. CodeMirror can't detect when it is being shown, so it needs an explicit refresh call to figure out its dimensions.

marijnh (Migrated from gitlab.com) closed this issue

2011-04-21 11:57:56 +02:00

marijnh commented

2011-04-21 12:00:51 +02:00

(Migrated from gitlab.com)

Thanks for the quick response.

marijnh commented

2015-09-13 10:56:53 +02:00

(Migrated from gitlab.com)

mentioned in issue #2707