Table-less layouts with DotNetNuke

We use DotNetNuke as a base for most of our applications. We are primarily in the space of content management, mixed with custom code. DNN handles content management pretty well for all our situations. The ability for us to create modules in DNN to do whatever we want is pretty awesome.. And after you get used to some quirks (and jumping through some pretty funky hoops, its actually pretty easy to use).

One thing we came across recently was doing some zebra striping with jQuery, and using a table-less layout skin (DIV's only). When you hovered over a table row, the whole page would jump up about 6-ish pixels. I'd noticed it, and hoped no-one else would, but alas it was discovered, and left up to me to fix.

I won't go into the complete set of styles and the full skin file, but I'll post enough to give a few hints.

    <!-- B. MAIN -->
    <div class="main">
        <!-- B.1 MAIN CONTENT -->
        <div class="main-content">
            <!-- Content unit - One column -->
            <div id="topPane" runat="server" class="column1-unit" visible="false">
                <hr class="clear-contentunit" />
            </div>
            <div id="contentPane" runat="server" class="column1-unit" visible="false">
                <hr class="clear-contentunit" />
            </div>
            <!-- Content unit - Two columns -->
            <div id="leftPane" runat="server" class="column2-unit-left" visible="true" />
            <div id="rightPane" runat="server" class="column2-unit-right" visible="false" />
            <hr class="clear-contentunit" />
            <div id="bottomPane" runat="server" class="column1-unit" visible="false">
                <hr class="clear-contentunit" />
            </div>
        </div>
        <hr class="clear-contentunit" />
        <!-- C. FOOTER AREA -->
        <div class="footer">
            <span class="credits">
                <dnn:TERMS ID="TERMS" runat="server" Text="Terms & Conditions" />
                |
                <dnn:PRIVACY ID="PRIVACY" runat="server" Text="Privacy Policy" />
            </span>
            &nbsp;&nbsp;&nbsp; 
            <span>Copyright &copy; Ellington Management &amps; Information Services,
                <%=DateTime.Now.ToString("yyyy")%>. All rights reserved. 
            </span>
        </div>
    </div>

The key here is make sure you add "visible=false" to all of your DIVs. When DotNetNuke adds a module to a pane, it also sets visible=true on the DIV. This way we make sure we don't get any empty DIV's rendered on the page. I don't 100% know why the empty div collapsed when you hover over a row with jQuery, but this solved the problem.

In the skin above, the only DIV element I have "visible=true" on, is the leftPane. I want this DIV to render, regardless of whether there is a module added to it or not. The repercussion we get if its not "visible=true" is that the DIV doesn't render, and the rightPane ends up rendering on the left hand side of the page.

Make sure you ALWAYS have a contentPane (Mental note to self)

Make sure you ALWAYS have a pane in your skin called "contentPane". I learnt this the hard way (very hard). We designed a skin for a customer and they effectively wanted 4 panels (top-left, top-right, bottom-left and bottom-right)... In all my wisdom I added panes with these names, and for the most part everything worked.... The big thing that didn't work was users logging out.

The reason is this: when you click the logout link, it redirects to a URL with ctl=logoff. When DotNetNuke sees Request.QueryString["ctl"], it loads this module and inserts it into the ContentPane... which in my case didn't exist. DNN does some error checking and if it can't find "ContentPane" it doesn't add the control. Kudos to DNN for good error checking. Bad form on my part for not realising that a "contentPane" is needed.

No Comments