How to use TabContainer in SharePoint 2013

[rusaym]

Hey! When I place a html table in tabPanel in SharePoint 2013, for some reason the table showing out of the tabPanel.

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DocInfo.ascx.cs" Inherits="RSIT.OfficeWork.ControlTemplates.RSIT.OfficeWork.DocInfo" %>
<%@ Register Assembly="AjaxControlToolkit, Version=17.1.1.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<ajaxToolkit:TabContainer runat="server" ActiveTabIndex="0" Width="100%">
    <ajaxToolkit:TabPanel runat="server" HeaderText="header1" ID="TabPanel1">
        <ContentTemplate>
            <table style="width: 100%;">
                <tr>
                    <td>1</td>
                    <td>sdf</td>
                    <td>66</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>scxv</td>
                    <td>55</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>cvbvnv</td>
                    <td>44</td>
                </tr>
            </table>
        </ContentTemplate>

</ajaxToolkit:TabPanel>

    <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="header 2">
        <ContentTemplate>
            1        
        </ContentTemplate>    
    </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

[MikhailTymchukDX]

Hi @rusaym I can not reproduce this behavior using the markup you provided. Would you please provide a sample project that illustrates this issue?

[rusaym]

TabContainer_.zip

[rusaym]

You have to set "NewFormTemplateName", "DisplayFormTemplateName" and "EditFormTemplateName" value to "CustomForm" on some of your content type, using Sharepoint Manager

[MikhailTymchukDX]

Hi @rusaym This behavior is caused by this change that allows displaying several tab header rows. It breaks page layout in some specific cases.

To negate this effect, add this style to your control's markup:

<style>
    .ajax__tab_default .ajax__tab {
        display: inline !important;
        float: none !important;        
    }

    .ajax__tab_xp .ajax__tab_header:before, .ajax__tab_xp .ajax__tab_header:after {
        display: inline !important;
    }

    .ajax__tab_xp .ajax__tab_header {
        height: 21 px;
    }
</style>

Please inform us of your result.

[rusaym]

It hasn't worked out for me, maybe I do something wrong. Did you reproduce this problem using my project? If you did, can you upload corrected project?

[MikhailTymchukDX]

Sure: TabContainer_2.zip

[rusaym]

There is no problem, if you place "Info.ascx" control in application page, but I use "Info.ascx" control in another control ("MyControl.ascx" with renderingtemplete id="CustomForm"), that is rendering template of my custom content type. So, adding styles doesn't work in this situation. To reproduce this problem, you have to set "NewFormTemplateName", "DisplayFormTemplateName" and "EditFormTemplateName" values to "CustomForm" on one of your content type, using Sharepoint Manager. Than try to create new item in list.

[MikhailTymchukDX]

Hi @rusaym I have managed to reproduce this behavior.

The reason for this is that Sharepoint renders Tab contents incorrectly.

It places TabContainer before the markup block where it is defined, and keeps the rest in the correct place:

It looks like this transformations takes place on the client side, because if we check the page source code, we'll see that the control's markup is correct:

<table class="ms-formtable" style="margin-top: 8px;" border="0" cellpadding="0" cellspacing="0" width="100%">
    <style>
        .ajax__tab_default .ajax__tab {
            display: inline !important;
            float: none !important;
        }

        .ajax__tab_xp .ajax__tab_header:before, .ajax__tab_xp .ajax__tab_header:after {
            display: inline !important;
        }

        .ajax__tab_xp .ajax__tab_header {
            height: 21px;
        }
    </style>
    <div id="ctl00_ctl33_g_94cdb0ac_6713_454d_b103_21f3052888e8_ctl00_Info_ctl00" style="width:100%;visibility:hidden;">
        <div id="ctl00_ctl33_g_94cdb0ac_6713_454d_b103_21f3052888e8_ctl00_Info_ctl00_header" class="ajax__tab_header">
            <span id="ctl00_ctl33_g_94cdb0ac_6713_454d_b103_21f3052888e8_ctl00_Info_ctl00_TabPanel1_tab" class="ajax__tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><a class="ajax__tab_tab" id="__tab_ctl00_ctl33_g_94cdb0ac_6713_454d_b103_21f3052888e8_ctl00_Info_ctl00_TabPanel1" href="#" style="text-decoration:none;"><span>header1</span></a></span></span></span><span id="ctl00_ctl33_g_94cdb0ac_6713_454d_b103_21f3052888e8_ctl00_Info_ctl00_TabPanel2_tab" class="ajax__tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><a class="ajax__tab_tab" id="__tab_ctl00_ctl33_g_94cdb0ac_6713_454d_b103_21f3052888e8_ctl00_Info_ctl00_TabPanel2" href="#" style="text-decoration:none;"><span>header 2</span></a></span></span></span>
        </div><div id="ctl00_ctl33_g_94cdb0ac_6713_454d_b103_21f3052888e8_ctl00_Info_ctl00_body" class="ajax__tab_body" style="display:block;">
            <div id="ctl00_ctl33_g_94cdb0ac_6713_454d_b103_21f3052888e8_ctl00_Info_ctl00_TabPanel1" class="ajax__tab_panel">

                <table style="width: 100%;">
                    <tr>
                        <td>1</td>
                        <td>sdf</td>
                        <td>66</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>scxv</td>
                        <td>55</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>cvbvnv</td>
                        <td>44</td>
                    </tr>
                </table>

            </div><div id="ctl00_ctl33_g_94cdb0ac_6713_454d_b103_21f3052888e8_ctl00_Info_ctl00_TabPanel2" class="ajax__tab_panel" style="display:none;visibility:hidden;">

                1

            </div>
        </div>
    </div>

...

I'm closing this issue, because we did not detect any bug in the AJAX Control Toolkit. Feel free to comment if you need any assistance.

[rusaym]

May be you have any suggestion to resolve this problem? By the way, if place html controls or text without table, the form renders correctly.

[MikhailTymchukDX]

@rusaym You can arrange DOM elements in the correct order using a code like the following:

<script  
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var sharepointContainer = $(".ms-formtable");
        var panel1Content = sharepointContainer.next();
        var panel2Content = panel1Content.next();
        var tabPanels = $(".ajax__tab_panel");
        var tabContainer = $(".ajax__tab_container");
        var tabBody = $(".ajax__tab_body");
        panel1Content.detach().appendTo(tabPanels[0]);
        panel2Content.detach().appendTo(tabPanels[1]);
        tabPanels.detach().appendTo(tabBody);
        tabContainer.detach().appendTo(sharepointContainer);
    });
</script>

However, I cannot guarantee that this approach will work in more complex case.

TabContainer_3.zip

[rusaym]

@MikhailTymchukDX, Thank you!