Tab content styling question

2 posts, 0 answers
  1. Emil
    Emil avatar
    19 posts
    Member since:
    Oct 2012

    Posted 21 Feb 2013 Link to this post

    Hello,

    I have a RadWindow. The window contains a table with two rows: the first row (sigle column) contains a RadTabStrip and the second (two colums) contains a checkbox and a button. Each TabStrip contains a RadTreeView:

    <table style="width:100%;">
        <tr style="height:100%;vertical-align:top;overflow:auto">
            <td colspan="2">
                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" Width="100%" Height="100%">
                    <Tabs>
                        <telerik:RadTab runat="server" Text="Tab1" Selected="True">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Tab2">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="100%" SelectedIndex="0" Height="100%">
                    <telerik:RadPageView ID="RadPageView1" runat="server" Height="100%" style="border: 1px solid grey">
                        <telerik:RadTreeView ID="RadTreeView1" runat="server"></telerik:RadTreeView>
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView2" runat="server" Height="100%" style="border: 1px solid grey">
                        <telerik:RadTreeView ID="RadTreeView2" runat="server"></telerik:RadTreeView>
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
            </td>
        </tr>
        <tr>
            <td style="font: normal 12px arial; text-align: left;">
                <asp:CheckBox ID="CheckBox1" runat="server" Text="Do something when checked." AutoPostBack="true" />
            </td>
            <td style="text-align: right">
                <telerik:RadButton ID="CancelButton" runat="server" Text="Cancel" OnClientClicked="windowClose" UseSubmitBehavior="false">
                </telerik:RadButton>
            </td>
        </tr>
    </table>

    I want the content of the first row to autoresize if the RadWindow is resized and the second row to remain the same.

    I've tried setting the row height to 100% but with no result.
  2. Emil
    Emil avatar
    19 posts
    Member since:
    Oct 2012

    Posted 23 Feb 2013 Link to this post

    I've solved it by using some javascript to alter the firstrowstyle css height and the RadPageView1 height:

    function Resize() {
       $('.firstrowstyle').css({ 'height': (($(window).height()) - 60) + 'px' });
        document.getElementById("<%=RadPageView1.ClientID%>").style.height = $(window).height() - 110 + "px";
    }
    window.onresize = window.onload = Resize;
Back to Top