Sliding Pain in firefox

[Rob]

G'Day

We have a page in which we have a sliding pane on the right hand side, which slides to the left.

We have found that in Firefox the content of the sliding pane is cut off at the height of whatever image we use as an icon for the pane.

We have tried setting every object above the pane to 100% height, but this just makes a mess of our layout, and although the sliding pane is ten the correct height, it sprouts scrollbars and becomes transparent.

For the moment, as a workaround, we have inserted a very tall image as an icon, but the pane still becomes transparent, so we have then placed a div inside the pane with background colour set to white and height 400 just so that it looks almost presentable.

The sliding pane does exactly what we would expect in IE7.

Here is the code:

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%">
        <telerik:RadPane ID="rpMain" runat="server">
            <table class="container" cellspacing="0">
                <tr valign="top" style="height:30px; padding:5 0 0 5;" >
                    <td align="left">
                        <div id="InfoListHeading">
                            <h1>
                                <asp:Label ID="lblHeading" runat="server" Text="" CssClass="InfoListHeadingText"></asp:Label>
                            </h1>
                        </div>
                    </td>
                </tr>
                <tr valign="top">
                    <td align="left">
                        <table width="100%">
                            <tr valign="top">
                                <td>
                                    <telerik:RadTreeView ID="rtvInfo" runat="server" EnableAjaxSkinRendering="true" Font-Size="12pt" Skin="Engraving" EnableEmbeddedSkins="False" >
                                        <CollapseAnimation Duration="100" Type="OutQuint" />
                                        <ExpandAnimation Duration="100" />
                                        <NodeTemplate>
                                            <table width="95%" cellpadding="3px">
                                                <tr>
                                                    <td rowspan="2" >
                                                        <asp:ImageButton ID="ibProduct" runat="server" Width="150px" />
                                                        <telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="ibProduct">
                                                            <asp:Image ID="imgBigProduct" runat="server" Width="400px" />
                                                        </telerik:RadToolTip>
                                                    </td>
                                                    <td align="left">
                                                        <asp:HyperLink ID="hlLink" runat="server" CssClass="InfoListLink">
                                                            <asp:Label ID="lblName" runat="server" Text='<%# DataBinder.Eval(Container, "Text") %>'></asp:Label>
                                                        </asp:HyperLink>
                                                    </td>
                                                    <td>
                                                        <asp:Label ID="lblPrice" runat="server" Text=""></asp:Label>
                                                    </td>
                                                    <td>
                                                        <asp:Button ID="btnBuyNow" runat="server" Text="" OnClick="AddItem"  />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="left">
                                                        <asp:Label ID="lblText" runat="server" Text="" CssClass="InfoListText"></asp:Label>
                                                    </td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                            </table>
                                        </NodeTemplate>
                                    </telerik:RadTreeView>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
        </telerik:RadPane>
        <telerik:RadPane ID="rpBasket" runat="server" Width="30px" CssClass="basketPane">
            <telerik:RadSlidingZone ID="rszBasket" runat="server" Width="30px" SlideDirection="left">
                <telerik:RadSlidingPane ID="rspBasket" runat="server" Width="200px" IconUrl="Images/Stock/shopping_small.jpg" TabView="ImageOnly" Title="Shopping Basket" CssClass="slidingBasket">
                    <div id="divBasket" runat="Server" style="background-color:White; height:100%;">
                        <asp:Label ID="lblBasketEmpty" runat="server" Text=""></asp:Label>
                        <asp:Repeater ID="rptrBasket" runat="server">
                            <HeaderTemplate>
                                <table width="100%">
                                    <tr style="border-bottom:groove 2pt red;">
                                        <th>
                                            <asp:Label ID="lblItemHead" runat="server" Text=""></asp:Label>
                                        </th>
                                        <th>
                                            <asp:Label ID="lblQuantityHead" runat="server" Text=""></asp:Label>
                                        </th>
                                        <th>
                                            <asp:Label ID="lblPriceHead" runat="server" Text=""></asp:Label>
                                        </th>
                                    </tr>
                            </HeaderTemplate>
                            <ItemTemplate>
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblItem" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ItemDescription") %>'></asp:Label>
                                        </td>
                                        <td>
                                            <asp:Label ID="lblQuantity" runat="server" Text='<%# CDbl(DataBinder.Eval(Container.DataItem, "Quantity")).ToString("#0.####") %>'></asp:Label>
                                        </td>
                                        <td>
                                            <asp:Label ID="lblPrice" runat="server" Text='<%# db.GetTraderCurrency(session("TraderID")) & CDbl(DataBinder.Eval(Container.DataItem, "LinePrice")).ToString("#0.00") %>'></asp:Label>
                                        </td>
                                    </tr>
                            </ItemTemplate>
                            <FooterTemplate>
                                    <tr class="shoppingBasketTotal">
                                        <td>
                                            <asp:Label ID="lblTotalText" runat="server" Text=""></asp:Label>
                                        </td>
                                        <td>
                                        </td>
                                        <td>
                                            <asp:Label ID="lblTotalPrice" runat="server" Text=""></asp:Label>
                                        </td>
                                    </tr>
                                </table>
                            </FooterTemplate>
                        </asp:Repeater>
                        <asp:Button ID="btnCheckout" runat="server" Text="" />
                    </div>
                </telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </telerik:RadPane>
    </telerik:RadSplitter>

[Tsvetie]

Hi Rob,
I tried to reproduce the transparency problem in FF that you describe, but to no avail - please find my test page attached. Could you please prepare and send me a simple running project, demonstrating this problem so that I can research what is causing it?

As for the height problem - in case you have elements, wrapping the RadSplitter with no height, the splitter as well as the RadSlidingPane cannot calculate their height correctly. This actually is not a problem of the RadSplitter control, but rather something that is expected. You will get the same result with a simple DIV element. For example, examine the behavior of the following page in IE6, IE7 and FF:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div style="width:100%;height:100%;background-color:Red;">Test</div>
    </form>
</body>
</html>

Best wishes,
Tsvetie
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.