Fields not visible in custom layout template

I've been working on using the custom layout template concept to provide some "draggable formatting components" for our end users to use in their layouts. For example, we want the user to have a "credit card layout" that they simply need to type in a title, content, buttons, and add an image to. Here's what I've setup:

I can successfully register the layout component, add the layout to a page, and drop content in. When I preview the page, all of those fields are there. However, when I publish this page and view it live, only the "Title" field and "Image" fields are visible. When I look at the source code, it seems like the typical "data binding" elements are missing for the "Text" and "Buttons" fields.

What gets weirder, is that if you click the button to live edit the page, the fields show up again, and the content is still there. As soon as I save/publish again, the fields are gone.

By contrast, here is another custom layout widget (a simple arrow title header with a grey background block) that works just fine.

I'm not sure of there are some "rules" for divs vs spans that I'm missing or rules for nesting areas or some naming conventions or what for this. I had submitted a ticket for this and after some delay I was told to look at the naming guidelines and that didn't really help out much. I'm hoping somebody in the community here has experienced something similar, or has some more input and can help.

 Right now I'd say about a third of our custom layout formats (including some big ones for header/footer navigation) are suffering from this problem, and we'd love to have a solution in place before we release this site.

Thanks in advance!

Hello Sean,

You can try with div elements only.

More information is available in the following article:
Guidelines for layout widgets

I hope the information helps.

Regards,
Svetoslav Manchev
Telerik

Greetings Svetoslav,

I had been given that link as well by Telerik support and sadly I didn't find it of much use. The samples provided sort of a start, but there was no documentation about required vs optional fields and a general guideline for structure if you want to go outside of the structure in the examples.

After a couple more discussions with support and some tweaking on some code they provided I found two issues that seemed to be affecting my success:

1. The "customClass" and "CustomClass" class definitions that are in the samples are necessary. I only had partial success until I added those. Having read the documentation, I thought that they were just placeholders for any kind of custom styling you wanted to add to that particular element.

2. While this may be tertiary, I wound up putting the sf_colsOut/In and CustomClass declarations before any additional styling classes I needed to add. I suspect (but can't confirm) that the parser that renders the additional markup is looking for these items first.

3. The updated code sample I had received had contained Ids for all of the "runat=server" elements that were in place. This worked initially, but when I added a second layout control element to a page, I hit the 'ol YPOD (yellow page of death) because the controls were using static Ids at that point. Removing the id allowed the auto naming conventions to work.

For anybody else that may run into this issue, here's the final markup that we have working on our site now:

Note that this works with span tags and h2 tags, in additional to the typical div tags you see in the examples.

Hope this helps anybody else with the issue.

Hello Sean,

Thank you for the shared final solution you have with the community.

Regards,
Svetoslav Manchev
Telerik