Empty placeholder missing when using flexbox

Search for a command to run...

No comments yet. Be the first to comment.
Polly is great library for easily configuring different kinds of policies around code execution, be it retry, circuit breaker, caching or lots of other things. It's probably most often used around HTTP requests. If you haven't heard about it you defi...

This is part 2 of my series on unit testing in .NET (C#) and will be about my conventions regarding naming unit tests, how to structure them and which parts to test. And lastly I will help you increase readability of assertions and potential error me...

I feel like unit testing is very important and very beneficial in a lot of ways. It helps with not breaking existing functionality and thereby also making you more confident in changing code without fear of breaking important stuff. Often it also mak...

I've been working with Swagger through NSwag a lot recently and also needed to get it to work when hidden behind a reverse proxy - i.e. another service forwarding a request to the service exposing the Swagger UI. Some of the issues I've had along the...

The other day I was writing a unit test to verify what was supposed to happen when a Task would throw an exception when awaited. It wasn't as straight forward as I first assumed, but I quickly found this Stack Overflow post that helped me: https://st...

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!