November Happy Hour will be moved to Thursday December 5th.

AI OnAI Off

Infinite growing height on content areas for on-page editing due to CSS transitions

Matthew Jimenez
Matthew Jimenez
Vote:
 

Hi all, 

I recently attempted to update to EPiServer.CMS.UI >= 11.11.0, and found the content areas for on-page editing would continuously grow from resizing to match content.

Upon investigation, one of the chief things that changed was the addition of epiEditMode.css and the rules:

[data-epi-property-name] {
  min-height: 14px;
  min-width: 18px;
}
Unfortunately the CSS for my site includes the following, which did not play well here (and various other times throughout development): 
* {
  transition: all 0.3s linear;​
}

The fix is easy though, I just had to override these rules with the following:

[data-epi-property-name] {
  transition: none;
}

Understandably a CSS rule on * is a bad idea, but width or height transition rule on DIV makes a reasonable amount of sense. 
I figured this might be helpful to others encountering similar problems.

#203609
Edited, Apr 29, 2019 16:06
Jakob Stjernholm
Jakob Stjernholm
Vote:
 

All I did was to set the min-height: 14px; to min-height: 14px!important; and it worked for me, I haven't seen anything else affected by it 

#266868
Edited, Nov 17, 2021 10:33
* 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.