Monday, November 15, 2010

Tool Part is moving at the Bottom of the page in Edit Mode

Recently I encountered an issue in my project which was related with custom Master page. I have provided "Exit Edit Mode" option on my web part pages so that after editing the pages, user can exit from the edit mode of the page (as shown below).

As most of you aware of, I have added "DesignModeConsole" control in my master page (as shown below) to incorporate this requirement.

<div class="content_mid_pad">

    <asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">

     <wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>

    </asp:ContentPlaceHolder>

</div>

 

After this I found that the tool part pane of my web parts is moving at the bottom of the page in the page edit mode. In normal mode the page was working fine. It was weird. I googled and found that the "DesignModeConsole" control renders a pair of <tr> & <td> tags. Since I wrapped this control within a <div> tag, the design gets distorted in the page edit mode. Now I tweaked the above code to accommodate the auto generated <tr> & <td> tags (as shown below).

<div class="content_mid_pad">

    <table width="100%">

<tbody>

        <asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">

        <wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>

        </asp:ContentPlaceHolder>

    </tbody>

    </table>

</div>