Search code examples
javascriptjquerycodemirror

codemirror selected text css does not work (div background color doesn't show in text area)

I created codemirror by:

editor = CodeMirror.fromTextArea(document.getElementById("code"), {
      lineNumbers: true,
      readOnly: false,
      theme: 'ambiance',
      mode: mode(lang),
      lineWrapping: true,
    });

however, when I tried to select text, the selected text wasn't highlighted. I even added:

.CodeMirror-selected { background: red !important; }

however it still doesn't work... can someone please give me some hint/suggestion? thank you!! :)

Edit:

I found how to make it work, by removing the following css.. I'm still confused why though.

div{
  position:relative;
  overflow:hidden;
}
Solution

  • By making every div in the page position: relative by default, you're going to cause unwanted side effects. In this case, it probably messed up the z-index ordering and thus prevented the divs used to draw the selection being on top of the background.

    Just do not use blanket rules like that if you want to be able to use widgets like CodeMirror on your page.