Empty placeholder missing when using flexbox

Empty placeholder missing when using flexbox

The other day I stumbled into an issue where a placeholder was missing in the Experience Editor when there where no renderings in that placeholder. The placeholder worked fine if it had any renderings, but if you removed them all it would disappear. The problem is of course that when it is not visible, you cannot select it and add renderings to it.

At first I thought it was an issue with a custom AngularJS directive we were using, which would replace its content (ng-transclude) which was messing with Sitecore’s chrome data or something like that.

It didn’t actually having anything to do with that, instead it was just the usual styling issue that you run into with the Experience Editor at times with your site’s own styling.

It turns out that if you have a placeholder inside an element with display: flex, then the placeholder ends up with a width of 0 – i.e. invisible.

<div style="display: flex">
    <!-- Sitecore Placeholder -->
</div>

It’s pretty easy to fix by just adding flex-basis: 100% to .scEmptyPlaceholder in your own styling.

.scEmptyPlaceholder {
   flex-basis: 100%;
}

With that the placeholder is now visible again and your editors can now happily insert renderings into empty placeholders inside flexbox again.

And there we go, it’s back!

placeholder-empty