When Tridion’s Experience Manager Messes up CSS

We’ve all been there. It’s  2:00 in the afternoon. You need to pick up your kids from school. But, when you look at a component in Tridion’s Experience Manager (XPM / Site Edit), it’s broken. WTF! You’re not a front-end guy. You’re an architect. What do you do?

Option 1: Ask Frank

Yeah, you could reach out over Skype or Slack and ask for help.
But I actually have a day job, and you’d really hate to see the invoice that Tahzoo would send you.

Option 2: Try this

.tridionuicp {
  display: inherit; 
  width: inherit; 
  height: inherit; // optional
  float: inherit;
  clear: inherit;

  /* optional for flex-box 
  flex-direction: inherit; 
  flex-wrap: inherit; 
  justify-content: inherit; 
  align-content: inherit; 
  align-items: inherit;
 */
}

Most of the problems come in because XPM wraps components in a span and spans’ default display property is inline. This wreaks havoc when children are floated or laid-out in other side-by-side ways. So the aformentioned snippet should help your XPM component inherit whatever the properties are for your well-behaved parent container.

Making Tweaks As-Needed

This isn’t full-proof, it just covers the majority of issues you may encounter. If the snippet breaks other, formerly working XPM-wrapped components, you may need to write a more specific rule:

First: Change the selector based on what your misbehaving component is in:

•  Does the parent have a class or id?
  • If so, your selector should be #contentParent > .tridionuicp
  • If not, keep going up levels until something does, and write your selector with the element name: #bigContainer > div > .tridionuicp
• Does the parent have more than one XPM-wrapped component?
  • If the misbehaving component is first, your selector should be #contentParent  > .tridionuicp:first-child
  • If the misbehaving component is last, your selector should be #contentParent > .tridionuicp:last-child
  • If the misbehaving component is in some other position, your selector should be #contentParent > .tridionuicp:nth-child(integer) where integer should be replaced with the 1-indexed position of the element

Second: Change additional properties to match the parent

• Does the parent have an explicit width?
  • If so, provide an explicit width: use width: 200px instead of width: inherit
• Does the parent have display values other than inline, inline-block  , or block ?
  • Anything that has flex-, justify , or align needs to be inherited or copied down

Option 3: completely rebuild XPM Drink

Let’s be honest, this should’ve been your first option.

I do have a proposal/theory that I’m working on for how XPM could be built to avoid this nonsense from the start. More on that later.