I’m having the same issue. The problem occurs on smaller screens where there are two rows of buttons above the editor (b, i, h1, h2 … code, comment, more) instead of one. Since this plugin adds additional buttons (light/dark, 12, fullscreen), it makes the problem all the more apparent. The second row of buttons covers the top line or two of the editor.
In terms of html, the issue is that the #ed_toolbar div (row(s) of buttons) is positioned absolutely and the .CodeMirror-wrap div (editor) is positioned below with a margin-top of 35px. When the #ed_toolbar takes up 2 rows, the .CodeMirror-wrap needs to be pushed down 60px, instead of 35px. A simpler solution would be to simply remove the absolute positioning from #ed_toolbar so it pushes .CodeMirror-wrap down and we don’t need to top margin.
Hope this is helpful!
– Micah
I’m having the same issue as well.
Have a look at this screenshot: http://sv.tinypic.com/r/r0dwxu/8
I’m on a 2560×1440 screen and nearly always have my browser covering half the screen width (~1220px).
Quickfix: Replace
.wp-editor-expand .html-active .CodeMirror{position:relative;z-index:1;margin-top:35px}
with
.wp-editor-expand .html-active .CodeMirror{position:relative;z-index:1;margin-top:60px}
in /plugins/html-editor-syntax-highlighter/lib/hesh.min.css.
For a better fix see micahjm’s answer!
I have the same problem. Hope it will be fixed soon…
That issue was fixed in v. 1.6.4. Please update.
Now have version 1.6.7 (last). Problem still exists. According to micahjm add this to your functions.php:
add_action( 'admin_head', 'admin_css' );
function admin_css() {
echo '<style>
div#ed_toolbar.quicktags-toolbar {
position: relative !important;
}
div.CodeMirror.cm-s-default.CodeMirror-wrap {
margin-top: 0 !important;
}
</style>';
}
Thanks @dynkin, that worked and I definitely recommend it get rolled into the plugin. (1.6.8 had this issue in OSX Chrome 45.0.2454.85 )