I am losing the formatting of my tabs when I add linked grids to the grid's Master Template - Tabs on Top. I've attached to pics that show the formatting when I initiate the template and go with the original configuration, then with linked grids added. My HTML and Javascript is:
HTML:
<!--IMPORTANT: If you remove a tab pane from the HTML markup, be sure -->
<!--to also make the necessary changes in the associated Javascript -->
<!--Tab Container - Tabs on Top -->
<div id="{tabId}">
<div id="{tabId}.TABBAND">
<a id="{tabid}.0.TAB" class="" href="#">Grid</a>
<a id="{tabid}.1.TAB" class="" href="#">Contacts</a>
<a id="{tabid}.2.TAB" class="" href="#">Locations</a>
<a id="{tabid}.3.TAB" class="" href="#">URLs</a>
<br style="clear: both;" />
</div>
<div id="{tabId}.PANES">
<div id="{tabid}.0.PANE">
{grid.Grid_Part}
{grid.DetailView_Part}
</div>
<div id="{tabid}.1.PANE">
{LinkedContentSection:SOCONTACTS}
</div>
<div id="{tabid}.2.PANE">
{LinkedContentSection:SOLOCATION}
</div>
<div id="{tabid}.3.PANE">
{LinkedContentSection:SOURL}
</div>
</div>
</div>
Javascript:
window['{tabid}Obj'] = new A5.Tab('{tabid}',[
{html: 'Grid', value: 'Grid'},
{html: 'Contacts', value: 'Contacts'},
{html: 'Locations', value: 'Locations'},
{html: 'URLs', value: 'URLs'}
],{
tabClassName: 'A5TabTopOff',
tabSelectedClassName: 'A5TabTopOn',
tabDisabledClassName: 'A5TabTopDisabled',
paneClassName: 'A5TabTopPane'
});
The good news is that the tabs work! Any help??? My thanks in advance.
Grid wMaster Template - Tabs on Top copy.pngGrid wMaster Template - Tabs on Top - Linked Grids copy.jpg
HTML:
<!--IMPORTANT: If you remove a tab pane from the HTML markup, be sure -->
<!--to also make the necessary changes in the associated Javascript -->
<!--Tab Container - Tabs on Top -->
<div id="{tabId}">
<div id="{tabId}.TABBAND">
<a id="{tabid}.0.TAB" class="" href="#">Grid</a>
<a id="{tabid}.1.TAB" class="" href="#">Contacts</a>
<a id="{tabid}.2.TAB" class="" href="#">Locations</a>
<a id="{tabid}.3.TAB" class="" href="#">URLs</a>
<br style="clear: both;" />
</div>
<div id="{tabId}.PANES">
<div id="{tabid}.0.PANE">
{grid.Grid_Part}
{grid.DetailView_Part}
</div>
<div id="{tabid}.1.PANE">
{LinkedContentSection:SOCONTACTS}
</div>
<div id="{tabid}.2.PANE">
{LinkedContentSection:SOLOCATION}
</div>
<div id="{tabid}.3.PANE">
{LinkedContentSection:SOURL}
</div>
</div>
</div>
Javascript:
window['{tabid}Obj'] = new A5.Tab('{tabid}',[
{html: 'Grid', value: 'Grid'},
{html: 'Contacts', value: 'Contacts'},
{html: 'Locations', value: 'Locations'},
{html: 'URLs', value: 'URLs'}
],{
tabClassName: 'A5TabTopOff',
tabSelectedClassName: 'A5TabTopOn',
tabDisabledClassName: 'A5TabTopDisabled',
paneClassName: 'A5TabTopPane'
});
The good news is that the tabs work! Any help??? My thanks in advance.
Grid wMaster Template - Tabs on Top copy.pngGrid wMaster Template - Tabs on Top - Linked Grids copy.jpg