This is a migrated thread and some comments may be shown as answers.

[Solved] Width Issues with Rotator within PanelBar

5 Answers 115 Views

Rotator

This is a migrated thread and some comments may be shown as answers.

virt asked on 14 Nov 2008, 03:38 PM

I need to display Rotator (fixed width) on multiple Panels (RadPanelItem) within PanelBar (can be fixed with but 100% width preferred). For some reason each time Panel containing Rotator is expanded/collapsed the widht of Rotator is decreased (I belive by 20px, but I might be mistaken). Is this a Bug or Configuration issue? How can I resolve this?

Thank you,
a.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <!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> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <telerik:RadPanelBar ID="RadPanelBar1" runat="server"  
        
                        ExpandMode="FullExpandedItem" Height="400px"  
        
                        Width="460px" Skin="Gray"> 
        
                        <CollapseAnimation Duration="100" Type="Linear" /> 
        
                        <ExpandAnimation Duration="100" Type="Linear" /> 
        
                        <Items> 
        
                            <telerik:RadPanelItem Expanded="true" Text="CHOOSE SET"> 
        
                                <Items> 
        
                                    <telerik:RadPanelItem> 
        
                                        <ItemTemplate> 
        
                                            <telerik:RadRotator ID="rotSet" runat="server"   
        
                                                Height="108px" ItemHeight="100px" ItemWidth="150px" RotatorType="Buttons"  
        
                                                Width="450px"> 
        
                                                <ItemTemplate> 
        
                                                    <asp:HiddenField ID="hdnSetId" runat="server" Value="" /> 
        
                                                    <asp:Image ID="imgSet" runat="server" ImageUrl="" /> 
        
                                                </ItemTemplate> 
        
                                            </telerik:RadRotator> 
        
                                        </ItemTemplate> 
        
                                    </telerik:RadPanelItem> 
        
                                </Items> 
        
                            </telerik:RadPanelItem> 
        
                            <telerik:RadPanelItem Text="CHOOSE PACKAGE"> 
        
                                <Items> 
        
                                    <telerik:RadPanelItem> 
        
                                        <ItemTemplate> 
        
                                            <telerik:RadRotator ID="rotPackage" runat="server"  
        
                                                Height="108px" ItemHeight="100px" ItemWidth="150px"  
        
                                                RotatorType="Buttons" Width="450px"> 
        
                                                <ItemTemplate> 
        
                                                    <asp:HiddenField ID="hdnPackageId" runat="server" Value="" /> 
        
                                                    <asp:Image ID="imgPackage" runat="server" ImageUrl="" /> 
        
                                                </ItemTemplate> 
        
                                            </telerik:RadRotator> 
        
                                        </ItemTemplate> 
        
                                    </telerik:RadPanelItem> 
        
                                </Items> 
        
                            </telerik:RadPanelItem> 
        
                        </Items> 
        
                    </telerik:RadPanelBar> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

5 Answers, 1 is accepted

answered on 19 Nov 2008, 02:07 PM

Hello,

I think this is a known bug in the rotator code that repaints the control. In your scenario, a repaint is forced each time you open/close a panelbar item. The bug is already resolved and the fix will be included in the next RadControls for ASP.NET AJAX service pack release, which is scheduled for next week. If you cannot wait until then, please open a formal support ticket and request a custom hotfix build to be sent to you. I apologize for the inconvenience.

Best wishes,
Lini
the Telerik team

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

answered on 01 May 2009, 05:30 PM

Has any progress been made on this? I am still exeriencing the repaint with the newest release. This is a test page that is just a modification of the multiple scroller example downloaded with the latest release. I removed the second scroller and made the width of the Rotator 100%. Any timeframe on getting this addressed?

    
            <%@ Page AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.MultipleScroller.DefaultCS" 
        
                CodeFile="TestScroll.aspx.cs" Language="C#" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <!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 id="Head1" runat="server">  
        
                <link rel="stylesheet" type="text/css" href="Styles.css" /> 
        
                <style type="text/css">  
        
                .Rotator  
        
                {  
        
                background-color:black;   
        
                cursor:default;   
        
                }  
        
                .Symbol  
        
                {  
        
                font-family: Verdana, Arial;   
        
                font-weight:bold;   
        
                font-size: 18px;   
        
                color:#3E7DBC;   
        
                }  
        
                .Quote  
        
                {  
        
                font-family: Verdana, Arial;   
        
                font-size: 11px;   
        
                color:#64962D;   
        
                }  
        
                .Change  
        
                {  
        
                font-family: Verdana, Arial;   
        
                font-size: 11px;   
        
                color: gray;   
        
                }  
        
                .Link  
        
                {  
        
                font-family: Verdana, Arial;   
        
                font-size: 10px;   
        
                color:#3E7DBC;   
        
                }  
        
                </style> 
        
            </head> 
        
            <body class="BODY">  
        
                <form runat="server" id="mainForm" method="post" style="width: 100%">  
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                    </asp:ScriptManager> 
        
                    <div style="width: 90%">  
        
                        <div class="top">  
        
                            <img src="Images/top.gif" width="452" height="35" alt="" /></div>  
        
                        <div class="marqueeTopBg">  
        
                            <div class="marqueeTop_Text">  
        
                                <telerik:RadRotator ScrollDirection="left" DataSourceID="xmlDataSource1" FrameDuration="1" 
        
                                    Width="100%" Height="24" ScrollDuration="2000" ID="Rotator1" runat="server">  
        
                                    <ItemTemplate> 
        
                                        <table width="130" cellpadding="0" cellspacing="3" border="0">  
        
                                            <tr> 
        
                                                <td class="symbol" style="font-weight: bold; color: #3e7dbc; cursor: default;">  
        
                                                    <%# XPath("Company")%> 
        
                                                </td> 
        
                                                <td class="Quote" style="cursor: default;">  
        
                                                    <%# XPath("Price")%> 
        
                                                </td> 
        
                                                <td class="Change" style="cursor: default;">  
        
                                                    <%# XPath("Difference")%> 
        
                                                </td> 
        
                                                <td style="cursor: default;">  
        
                                                    <img src='<%# XPath("Image") %>' style="border: 0px" alt="" /></td>  
        
                                                <td class="Quote" align="left" style="cursor: default;">  
        
                                                    &nbsp;&nbsp;</td> 
        
                                            </tr> 
        
                                        </table> 
        
                                    </ItemTemplate> 
        
                                </telerik:RadRotator> 
        
                            </div> 
        
                        </div> 
        
                        <div class="bottom">  
        
                            <img src="Images/bottom.gif" width="452" height="108" alt="" /></div>  
        
                    </div> 
        
                    <asp:XmlDataSource ID="xmlDataSource1" runat="Server" DataFile="/TestPages/upperMarquee.xml"></asp:XmlDataSource> 
        
                </form> 
        
            </body> 
        
            </html>