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
- If so, your selector should be
- 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)
whereinteger
should be replaced with the 1-indexed position of the element
- If the misbehaving component is first, your selector should be
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 ofwidth: inherit
- If so, provide an explicit width: use
- Does the parent have
display
values other thaninline
,inline-block
, orblock
?- Anything that has
flex
-,justify
, oralign
needs to be inherited or copied down
- Anything that has
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.
Permalink
Well explained. Great solution! Fixed it for me :)