Don't miss out Virtual Happy Hour today (April 26).

Try our conversational search powered by Generative AI!

Using VH to size a block in content area causes editor to infinitely grow in height

Vote:
 

This is odd behavior I found in migrating our existing site over to EPi and it causes the editor to infinitely increase in height. We are on update 121 (installed today in the hopes that it would fix the issue).

Steps to reproduce:

  1. Create a pagetype with a content area.
  2. Create a block with a view style that includes "height:100vh"
  3. Add the block to the contentarea on the page
  4. The editor will increase in size infinitely.

Here's the source of the rendered page:




Here's the block view:

@model Hendrix.Web.Models.ViewModels.HighlightViewModel

Here's a screenshot of the rendered html in the editor in Chrome's Dev Tools. The purple items are incrementing infintely.

https://twitter.com/jayburling/status/756558818478174208/photo/1 

I'm going to try to work around this by adding a style to set the height in edit mode to a set pixel size, but obviously would prefer not to have to. :)

Update: Here's my terrifically bad patch/hack so that I can edit these pages without the editor exploding:

(function () {
    console.log("Loaded vh unit fix for EPiServer editor.");
    if (window.parent.frames.length > 0) {
    var head = document.getElementsByTagName('head')[0];
    var s = document.createElement('style');
    s.appendChild(document.createTextNode(".specific-element-class-name { height: 500px!important; }"));
    head.appendChild(s);
}}());

Thanks!

Jay Burling
burling@hendrix.edu 

#151490
Edited, Jul 25, 2016 19:01
Vote:
 

This was reported as a bug (http://world.episerver.com/support/Bug-list/bug/CMS-1503), but it's currently marked as "Won't fix." I'm also having trouble with this bug.

#151626
Aug 01, 2016 13:04
Vote:
 

Is there any elegant workaround for this issue till today? 🤔

#260343
Aug 09, 2021 12:10
Vote:
 

I've encountered these issues too.  We opted for a second style sheet that is rendered in the _layout.cshtml when the user is in either edit or preview mode.  In these cases we've added additional styles for specific blocks to fix the height issue.  It might be a bit cleaner than your interim solution.

#260775
Aug 18, 2021 13:05
Bojan S. - Aug 18, 2021 13:13
Thanks, I did the same. It's good to be written here so anyone else can see the solution.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.