I was working with a full width and height slider page for my new WordPress theme and it just didn’t want to give me 100% screen height. While on a desktop computer it would not matter, on mobile devices I wanted the slider to be as easy as swooping to the next page with a finger, just like in a book.
Searching for an answer, I found out that all elements should have height:100%. Also, you need to make sure that the HTML and body are set to 100% height as well. So I made the changes in my main CSS file:
html, body { height: 100%; }
It did the trick, but later I notice the canvas in the WordPress Visual Editor gradually gets bigger when I write a post, or do anything really. With each button or mouse click the whole edit area got bigger and bigger. I thought it was a bug in WordPress version 4.2, but a test of their built-in themes didn’t have the bug. The Visual Editor height increased dynamically only in my installation.
The reason: height:100% on a body tag in combination with add_editor_style function.
add_action( 'init', 'sf_add_editor_styles' ); function sf_add_editor_styles() { add_editor_style( get_stylesheet_uri() ); }
This code in my functions.php was meant to give special style to the TinyMCE visual editor. What I didn’t take into consideration was that it damages the Visual Editor functionality as well.
The solution was to remove add_editor_style function and insert admin CSS code in it’s own admin.css and include it as usual with enqueue_script:
add_action('admin_print_styles', 'sf_admin_styles'); if (!function_exists('sf_admin_styles')){ function sf_admin_styles() { if (is_admin()) { wp_register_style("admin_css", get_template_directory_uri() . "/css/admin.css", array(), "1.0", "all"); wp_enqueue_style('admin_css'); } } }
Senior Software Engineer developing all kinds of stuff.