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>
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>