10

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:

enter image description here

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?

  • 2
    I think your question has been answered in sitecore.stackexchange.com/questions/612/…. If that link doesn't help you - try Placeholder Settings or this link: sitecore.stackexchange.com/questions/336/… – Mark Cassidy Oct 28 '16 at 22:35
  • This sounds like the expected behavior to me. Do the buttons show when you click the New Component button in the ribbon? – Ben Golden Oct 29 '16 at 20:19
  • based on the comments, I wasn't explaining this well. I've added some clarifications and an image to illustrate what is going on. – Jason Booth Oct 31 '16 at 13:51
  • Can you confirm that the placeholder you are trying to add a component to, has the Editable selected as pointed by Mark on one of his links? – Diego Oct 31 '16 at 14:07
  • @Diego, it does. I can add components to it, the issue is, I have to select content from placeholders D or E from the image and then use "Go to parent component" button to navigate up to placeholder A for the "Add Here" button show up in placeholder A. Why is there no "Add Here" button show up in placeholder A by default when trying to add a component from the ribbon? – Jason Booth Oct 31 '16 at 14:50
6

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;}
1

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!

  • +1 while not precisely as your answer, turns out that surrounding HTML elements (and their CSS) can indeed affect the display of the component/handles – Bishoy Hanna Aug 2 '17 at 9:49
0

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

  • You should provide details of what's in the link. – Dylan Young Jun 26 '17 at 13:59
0

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;
    }
}
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.