I have a rad tab strip in an expndable/collapsible div that has display:none.The scroll bar on the rad tab strip are not initially shown ,but it is viewable when the page is resized and there after.
<div>
<span><a id="displayTableContainer" href="javascript:toggle();">[ + ] Requirement section</a></span>
</div>
<div id="tableContainer" style="height: 15%;display:none;">
<table width="100%">
<tr>
<td>
<telerik:RadTabStrip ID="rtsSampleControlActivites" Height="60px" runat="server"
ScrollChildren="true" PerTabScrolling="true" ScrollButtonsPosition="Middle"
Orientation="VerticalLeft" MultiPageID="rmpSampleControlActivites" Align="Right"
CausesValidation="False">
</telerik:RadTabStrip>
<asp:LinkButton ID="lnkviewMore" runat="server" CommandName="ViewMore" Text="View More"></asp:LinkButton>
</td>
</tr>
</table>
function toggle() {
var eleMethod = document.getElementById("tableContainer");
var textMethod = document.getElementById("displayTableContainer");
var tabStrip = $find("<%= rtsSampleControlActivites.ClientID %>");
if (textMethod.innerHTML == "[ - ] Requirement section") {
eleMethod.style.display = "none";
textMethod.innerHTML = "[ + ] Requirement section";
}
else {
eleMethod.style.display = "block";
textMethod.innerHTML = "[ - ] Requirement section";
}
}
On expanding the div, I need to show the rad tab strip with scroll bar.Please help