Dynamically setting tab height to max height of all tabs in tabstrip

[Geoff]

Hello,

When using a RadTabStrip, I've noticed that the size of the tab strip fluctuates to accommodate the size of its content as I click from tab to tab. However, I'd like the height to remain constant as I click from tab to tab. The height of every tab should be the height of the tallest tab in the tab strip.

Nothing I've tried thus far has worked. How can this be accomplished? Help!

Thanks,
Geoff

[Kate]

Hello Geoff,

You will simply need to increase the height of the of the sprite image that is applied to the RadTabStrip control with 1px and then replace the original sprite image with the modified one. Please refer to this help article for more detailed clarification on how to achieve this.

Greetings,
Kate
the Telerik team

[Geoff]

Kate,

I may have been a little unclear in my request. What I'm trying to accomplish is getting the CONTENT of the tabs to be the same height, (dynamically calculated), not the tabs themselves. Perhaps this is related to the RadMultiPage or RadPageView controls.

I've attached a couple images to help explain. The first image shows a selected tab with some content in grids. The red arrow points at the bottom border of the of the page view's content. Note how the border is appropriately placed to show the content in the tab.

The second image shows another tab with no content in the grids. The red arrow points at the bottom border of the page view's content. Again, the border is appropriately placed to show the content of the tab.

What I would like is for that border to remain constant for all the views, having a height of the max height of all page views. For all other page views that are smaller, there is white space below the content to fill the area. The border would then remain at the same place whenever the user clicks from tab to tab.

Hopefully this makes sense. How can this be accomplished?

Thanks,
Geoff

[Kate]

Hello Geoff,

One approach would be if you get the height of the desired page and then set it to the different pageviews using the OnClientTabSelected event. Here is the code that I used to achieve that:

<script type="text/javascript">
        function pageLoad() {
            var multiPage = $find("<%=multipage1.ClientID %>");
            var pageview3 = multiPage.findPageViewByID("page3");
            pageview3.set_selected(true);
            //getting the height of page3
            height = document.getElementById('page3').offsetHeight;
            //setting height to the multipage
            //multiPage.get_element().style.height = height + "px";
        }

        function OnClientTabSelected(sender, args) {
            var multiPage = $find("<%=multipage1.ClientID %>");
            var pageView = multiPage.get_selectedPageView();
            pageView.get_element().style.height = height + "px";
        }

    </script>

markup:

<telerik:RadTabStrip ID="tabStrip1" runat="server" SelectedIndex="1" MultiPageID="multipage1"
            OnClientTabSelected="OnClientTabSelected">
            <Tabs>
                <telerik:RadTab runat="server" Text="Root RadTab1" Value="1" PageViewID="page1">
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="Root RadTab2" Value="2" PageViewID="page2">
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="Root RadTab3" Value="3" PageViewID="page3" Selected="true">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage runat="server" ID="multipage1" CssClass="multipage">
            <telerik:RadPageView ID="page1" runat="server" CssClass="page1">
                page1
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="page2" CssClass="page2">
                page2
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="page3" CssClass="page3">
                page3
                <br />
                page3
                <br />
            </telerik:RadPageView>
        </telerik:RadMultiPage>

All the best,
Kate
the Telerik team

[Geoff]

Kate,

Thank you for the suggestion, but unfortunately that did not work for me. First, the findPageViewByID function did not find the page view until I used the client ID as an argument. Second, the getElementById function also did not find the element until I used the client ID as an argument, and once it was found, the offsetHeight value was 0, even though the pageview had content.

Is there anything else that I can try to achieve the requested result?

Thanks,
Geoff

[Kate]

Hi Geoff,

One reason I can think of causing this behavior is that you are using master/content page and/or custom user control(s) which will inevitably render different id-s of the RadPageViews. You can try testing the attached page that works as expected from my side. In order to help you in your particular scenario, however, I would ask you to modify my page and send it back to me, so I can test it locally.  

All the best,
Kate
the Telerik team

[Geoff]

Hi Kate,

Sorry for the long delay. I discovered the reason why I'm getting 0 as the offsetHeight value. The pageviews I'm working with are nested inside another set of pageviews and the pageview with these nested tabs are not initially selected when the page loads. Since their display is hidden, the offsetHeight returns 0. If they were initially visible, then I would get an offsetHeight as you expect.

Is there a solution that I can use to obtain the heights of these pageviews without having to ensure they are visible first? I will need to apply this same solution to many tabstrips on my page, some of which are nested several layers deep inside other controls, so the solution must be fast and clean.

Thanks,
Geoff

[Kate]

Hello Geoff,

Simply explaining your scenario is not enough for me to replicate the issue that you get. Can you please send me a simplified runnable project that I can test locally and help you out?

Kind regards,
Kate
the Telerik team

[Geoff]

Kate,

Why is a runnable project necessary? I've explained everything that I'm asking for several times already. I need a way to find the max height of the pageviews in the multipage for a tabstrip and to set the heights of all the remaining pageviews to that height. The solution you previously provided works when the tabstrip is initially visible on the first page load, but when it's contained inside another tab that is NOT initially selected (and thus not initially visible), the offsetHeight values for all the tabs in that tabstrip are 0. Therefore, simply using the offsetHeight values will not work in that case. You can easily reproduce this by nesting tabstrips inside of each other.

Is there a solution that I can use to obtain the heights of these pageviews without having to ensure they are visible first? I will need to apply this same solution to many tabstrips on my page, some of which are nested several layers deep inside other controls, so the solution must be fast and clean.

Geoff

[Kate]

Hi Geoff,

The reason I asked for a runnable project was that I wanted ti test it locally and see if the solution would work as expected in your particular scenario. However, you could try using jQuery and the ID-s of the RadPageViews in order to get their heights. For example the following code returns the height of pageview with ID="page3":

$telerik.$("#page3").height();

Kind regards,
Kate
the Telerik team

[Geoff]

Kate,

As I said previously, the height values are 0 when those tabs are initially hidden, even using jQuery. Therefore, this solution will not work.

I cannot attach a runnable project as you've requested since the only files I can attach through this forum are picture files. However, I've included the markup for the aspx here. It's the same page you sent to me previously, but I've modified it to illustrate my issue.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip_DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .page1, .page2, .page3
        {
            border: 1px solid red; /*height: 100px;*/
        }
        .multipage
        {
            border: 1px green solid;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:radscriptmanager runat="server" id="radscriptmanager1">
    </telerik:radscriptmanager>
    <script type="text/javascript">
        function pageLoad() {
            //set second tab to selected to ensure visibility
            var multiPage = $find("<%=multipageouter.ClientID %>");
            var page2outer = multiPage.findPageViewByID("page2outer");
            //page2outer.set_selected(true);

            //getting the height of each nested pageview in page2outer
            $telerik.$("#<%=multipage1.ClientID %> > div").each(function () {
                alert("Height: " + $telerik.$(this).height());
            });
        }

    </script>
    <div>
        <telerik:RadTabStrip ID="tabStripOuter" runat="server" SelectedIndex="0" MultiPageID="multipageouter">
            <Tabs>
                <telerik:RadTab runat="server" Text="Outer Tab 1" Value="1" PageViewID="page1outer" />
                <telerik:RadTab runat="server" Text="Outer Tab 2" Value="2" PageViewID="page2outer" />
            </Tabs>
        </telerik:RadTabStrip>

        <telerik:RadMultiPage ID="multipageouter" runat="server" cssclass="multipage" SelectedIndex="0">
            <telerik:RadPageView ID="page1outer" runat="server" CssClass="page1">
                page 1 outer
            </telerik:RadPageView>
            <telerik:RadPageView ID="page2outer" runat="server" CssClass="page2">
                <telerik:radtabstrip id="tabStrip1" runat="server" selectedindex="0" multipageid="multipage1">
                <Tabs>
                    <telerik:RadTab runat="server" Text="Root RadTab1" Value="1" PageViewID="page1">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Root RadTab2" Value="2" PageViewID="page2">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Root RadTab3" Value="3" PageViewID="page3" Selected="true">
                    </telerik:RadTab>
                </Tabs>
            </telerik:radtabstrip>
            <telerik:radmultipage runat="server" id="multipage1" cssclass="multipage" SelectedIndex="0">
                <telerik:RadPageView ID="page1" runat="server" CssClass="page1">
                    page1
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="page2" CssClass="page2">
                    page2
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="page3" CssClass="page3">
                    page3
                    <br />
                    page3
                    <br />
                </telerik:RadPageView>
            </telerik:radmultipage>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    <br />
    </form>
</body>
</html>

I nested the tabstrip/multipage inside another tab to show that the height is 0 when the parent tab is initially hidden. The pageLoad() function invokes alerts to show the heights of each pageview. I have it initially set up so that the pageviews I'm trying to resize are contained inside another pageview that is not initially visible. The heights of all these pageviews are 0 in this case according to jQuery. If you uncomment the line that selects the outer tab and run it again, you will see that the height is > 0 as expected.

Is there a solution that I can use to obtain the heights of these pageviews without having to ensure they are visible first? I will need to apply this same solution to many tabstrips on my page, some of which are nested several layers deep inside other controls, so the solution must be fast and clean.

Geoff

[Kate]

Hi Geoff,

Thank you for clarifying your scenario. Unfortunately to get the height of the pageview you will need to make sure that the page is visible on the first place. For instance if you attach the pageLoad handler to the OnClientTabSelected event of the inner tab you will get the correct page height compared to the intial pageLoad when the inner page in not visible.

Kind regards,
Kate
the Telerik team

[Geoff]

Kate,

Using the OnClientTabSelected event works when a tab is selected, but not when the tab strip is initially made visible. In that scenario, the tabs would not conform to same height until after the user selects *another* tab in the strip. This is insufficient.

It's a shame that Telerik does not provide a solution to your controls not rendering more fluidly. Perhaps that can be included in a future release.

[Ivan Zhekov]

Hello, Geoff.

That's a very interesting point you have there, but allow me to offer you another look at the situation.

Let's try to describe (with words only) a solution for your case: we simply cycle tabs and see which one has the tallest associated page view and use that for the overall height.

Like Kate said, in order to get the page view height we first need to make it visible -- we need the browser to actually render the page view in order to get the height.

Suppose that we have another tabstrip somewhere within a page view -- now we need to perform the same thing again.

Suppose we have another tabstrip somewhere in that already nested tabs... Or that if we have an asycnhronous tab that takes 5 minutes to load? Or what if we have a tab that does not contain Telerik controls, but say Sencha controls. How do we make our tabs be aware of those controls so they would trigger their own loading mechanism so we could get the proper height.

You get the idea -- the more magically we try to make our controls work, the harder it gets and the more time it will require for the page to be fully initialized and in working state.

It should be noted that i did spend some time working out how the most popular UI frameworks tackled this and none does or if it does.

What could be done however is to trick things to look good visually. You could for instance wrap everything in a DIV that has borders and everything and has a min-height of say 200 pixels. For the cases when more height is required, the box will simply expand (as opposed to when using height, where scroll bars within the box will appear).

If the above [an outer wrapper with min height] sounds like a reasonable solution for your case, I will prepare some sample markup and styles and I will work with you when you integrate this in your project.

Regards,
Ivan Zhekov
the Telerik team