Widget in new zone not emitting HTML

Topics: Troubleshooting, Writing themes
Dec 9, 2011 at 10:06 PM

So I decided to split the header zone into 2 so that we could have two separate HTML widget display in each one. The problem is that one of my zones causes any widget in it to emit no HTML to the page. If I put the widget in HeaderFirst it renders but if I put it in HeaderSecond it shows the edit box but the widget itself doesn't render.


@if (Model.HeaderFirst != null || Model.HeaderSecond != null) {
<header id="layout-header" class="group">
    <div id="headerfirst">
    <div id="headersecond">


Zones: HeaderFirst, HeaderSecond, Navigation, Featured, BeforeMain, AsideFirst, Messages, BeforeContent, Content, AfterContent, AsideSecond, AfterMain, TripelFirst, TripelSecond, TripelThird, FooterQuadFirst, FooterQuadSecond, FooterQuadThird, FooterQuadFourth, Footer

Any idea what I'm doing wrong or what I missed?


Dec 9, 2011 at 10:23 PM

First things first. Why do you need to do that? Why don't you just put two Html widgets in the header zone?

Dec 10, 2011 at 12:54 AM

Bertrand's right - you'd better use a single Header layer (for clarity) and use two different layers instead (to differentiate when to display each widget). That'd be a much cleaner approach.

Dec 10, 2011 at 2:22 PM

Am I missing something? The OP just added an extra zone, there's nothing wrong with that. 

Dec 10, 2011 at 3:36 PM

sarudak: regarding your original problem, all zones behave exactly the same and there's no reason why one would fail and the other wouldn't; so the problem must lie somewhere else. Simply declaring a zone as you have done in Layout.cshtml should work fine (you only even need to declare it in Theme.txt so it can show up in the Widgets UI).

What's quite likely happening is that either there is something wrong with the Layer you're using to apply the widgets, or that one of the widgets you're putting in the zone is causing an error, or even that you have a Zone-HeaderSecond.cshtml override and something is wrong with that. The first thing to check is your log files in App_Data\Logs to see if an error is being caught.

Dec 15, 2011 at 5:18 PM

@sarudak - "if I put it in HeaderSecond it shows the edit box but the widget itself doesn't render."

Check the contents of the Zone using the "Shape Tracing" feature. If the Shape is actually there, but just not visible on the page, you may want to check the css being applied. Do an additional null check around each Zone if you don't want to account for an empty div messing up styles and positioning:

@if (Model.HeaderFirst != null || Model.HeaderSecond != null) {
<header id="layout-header" class="group">
    @if (Model.HeaderFirst != null) {
    <div id="headerfirst">
    @if (Model.HeaderSecond != null) {
    <div id="headersecond">

Take a look at TheThemeMachine; you can learn from how the TripelFirst, TripelSecond, and TripelThird zones are styled dynamically by determining which of the zones within the group actually contain content.