Add Here not Visible in Placeholder in Experience Editor

Question

I have a scenario where the Add Here button is not visible for the placeholder I want to add a component to. I have to select other content in the placeholder and use the Go to parent component button to navigate back up to my placeholder. At that point, the appropriate Add Here button is visible and I can add a component.

Two notes I think are important, the existing visible items in the placeholder are all at least grandchild descendants of the placeholder in question (they are within other nested placeholders). Also, if I do add a component to the placeholder (a direct child of my placeholder) I at least get an Add Here button directly above the added component but not between any of the other components that make up the nested placeholders.

An image might help explain this better:

A: The placeholder I want to add a component too but essentially, I can't select this placeholder - no Add Here button shows up.

B: Component that is already within the placeholder. It has a placeholder of its own, D.

C. Component that is already within the placeholder. It has a placeholder of its own, E.

To add another component to A, I have to select content in D or E and use the Go to parent component button to navigate back to A. At that point, the Add Here button shows up and I can add a component to A.

What experience editor magic can I do to get the Add Here button show up in placeholder A (instead of only placeholders D and E) when the add component button is clicked in the ribbon?

Answer 1

Sitecore really should ship with some CSS to make sure that placeholders don't shrink to 0px width. I've had this numerous times, and you can't click on something that's 0px wide.

Try adding this to your site's css

.scEmptyPlaceholder { min-width: 100px;}

Answer 2

I once faced a similar issue where the 'Add Here' was not visible for a component (I can't remember whether it was the top-most one or the out-most one). I had to add an empty div in the containing view where the main placeholder was declared.

So in your case, component A is rendered in placeholder Z for example. Placeholder Z was created/declared inside a view that contained nothing except the declaration of the placeholder. I had to add an empty div around this placeholder declaration which fixed it for me.

Before fix:

@Html.Sitecore().Placeholder("...")

After fix:

<div>
@Html.Sitecore().Placeholder("...")
</div>

I really hope this your case!

Answer 3

I found a similar issue. If the Sitecore component has 'position : fixed' style, in that case, if the component is added on the top of the page, it disappears from the Experience Editor. Here is a good article about this issue Positioning a fixed header below the Sitecore Experience Editor ribbon

Answer 4

Every time when I work with placeholders I try to wrap them in custom style which appears only in Experience editor. It helps content editors understand where is the edge of placeholder and help to select nested placeholders. Example below.

@model Sitecore.Mvc.Presentation.RenderingModel
@{
    string style = "";
    if (!Sitecore.Context.PageMode.IsNormal && Sitecore.Context.PageMode.IsExperienceEditor)
    {
        style = "min-height:200px; min-width:100px; border:1px dotted black; background-color: hotpink; padding-bottom:15px";
    }
}
<section class="some-class" style="@style">
    @Html.Sitecore().DynamicPlaceholder("your-placeholder", CreatePlaceholderWrapper(), 2, 4)
</section>
@functions
{
    TagBuilder CreatePlaceholderWrapper()
    {
        var tagBuilder = new TagBuilder("div");
        tagBuilder.Attributes.Add("style", "min-width:200px; min-height:100px; border:1px dotted black; background-color: pink;");
        return tagBuilder;
    }
}

Answer 5

I had also faced this issue recently. It was because an HTML data source had <br> instead of <br/>.

I changed it and the issue was resolved.