Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Natalie
1790
WebTab itself resizes but not the containing Panel on the Master Page.
posted

I have 2 tabs in the WebTab that is placed in a contentplaceholder which is placed in a panel with rounded corners(css) on the master page .  The first tab is bigger than the second tab(almost double.  The panel has a background color so the rounded corners show.  When the user selects tab 2, the panel on the masterpage should resize to the height of the tab 2.  This doesn't happen.  Instead the panel remains the original size and the extended height of tab 2 is the remainder of the panel with the background color of the panel.  In other words the tab is the right size, its background color is black, then I have the panel background color, blue that takes up the rest of the original tab height.

I have tried everything I can find on the webtab in the forums.  How can I get the tab change to resize the height of its containing panel on the masterpage?

  • 49378
    posted

    Hi nbizub,

    Thank you for your reply.

    I investigated your scenario but am yet unable to replicate your scenario. Attached is my test sample for your consideration. I can suggest that you use the SelectedIndexChanged client-side event of WebTab in order to ensure that your master pages panel (i.e. parent element of the WebTab). Here is some sample javascript code:

    

     function WebTab1_SelectedIndexChanged(sender, eventArgs)
    {
    

        var panelStyle = sender.get_element().parentElement.style;
        var tab = sender.get_tabs()[eventArgs.get_tabIndex()];
    

        panelStyle.width = tab.get_element().offsetWidth.toString() + "px";
        panelStyle.height = tab.get_element().offsetHeight.toString() + "px";
    

    }

    Please let me know if this helps.

    WebTabResizeContentPlaceHolder.zip
  • 49378
    posted

    Hi nbizub,

    Thank you for your reply.

    I investigated your scenario but am yet unable to replicate your scenario. Attached is my test sample for your consideration. I can suggest that you use the SelectedIndexChanged client-side event of WebTab in order to ensure that your master pages panel (i.e. parent element of the WebTab). Here is some sample javascript code:

    

     function WebTab1_SelectedIndexChanged(sender, eventArgs)
    {
    

        var panelStyle = sender.get_element().parentElement.style;
        var tab = sender.get_tabs()[eventArgs.get_tabIndex()];
    

        panelStyle.width = tab.get_element().offsetWidth.toString() + "px";
        panelStyle.height = tab.get_element().offsetHeight.toString() + "px";
    

    }

    Please let me know if this helps.