Search code examples
codemirror

How to avoid double cursor/caret in Codemirror textfield?

I use Codemirror to edit some javascript code. In Chrome the editor show two cursors, a small and a large one:

enter image description here

In Firefox there is another artefact next to the cursor:

enter image description here

In both browsers initially there is an artefact at the beginning of the text:

enter image description here

I am assuming its a css clash with my current page because it works well outside my page, but cant find the clash anywhere. Has anyone had similar issues or know what to do?

I am able to influence the colors of the two cursors as follows:

.CodeMirror {
     caret-color: red;
}


.CodeMirror-cursor {    
    background-color: blue;
    width:0px;
    border:none;
}

How can I hide the extra small red caret (or increase its size and hide the blue caret)? I tried to set caret-color to transparent. However, then still a small gray line remains. I am able to hide the large line but did not manage to correct the size of the small caret.

Example code:

var container = document.createElement('div');
this.appendChild(container);   

this.__codeMirror = window.CodeMirror(container,  
              {
                value: self.value,
                mode: self.mode,
                lineNumbers: false, 
                matchBrackets: true,
                continueComments: "Enter",
                extraKeys: {"Ctrl-Q": "toggleComment"}
              }
            );

Related question:

Solution

  • The issue has been caused by some css settings for div:

    treez-section div {
  padding-left: 1px;
  padding-right: 1px;
  border-style:none;
  padding-bottom: 5px;
}

    fixed by only considering first level children:

    treez-section > div {
  padding-left: 1px;
  padding-right: 1px;
  border-style:none;
  padding-bottom: 5px;
}