White Background

[Cade Cote]

I have the new radrotator on a page that I am trying to use. I have the rotator in div tags so has certain formatting. The problem I am having is I cant get the background of the rotator to be transparent. I have tried to change the backcolor to transparent and that did not work. What do I need to do to get it so there is no background. The text and stuff in the control follows the div tags I have them in, but the background stays white no matter what.

Here is the code I have. Thanks in advance

<

div class="rotator_mainimage" style="height: 344px; margin-top: 14px">

<div style="width: 90%">

<telerik:RadRotator ID="NewsRotator" runat="server" DataSourceID="xmlDataSource1"

RotatorType="Buttons" ScrollDirection="Up, Down" Height="351px"

Width="403px" BorderStyle="None" style="margin-top: 0px"

FrameDuration="4000">

<ItemTemplate>

<div class="rotator_eventtitle" style="text-align: left">

<%

#XPath("EventTitle")%>

</div>

<div class="rotator_eventdetails" style="text-align: left">

<%

#XPath("EventDetails")%>

</div>

<div class="rotator_eventdetails_url" style="text-align: left">

<a href='<%# Xpath("EventDetailsURL") %>' target="_blank">

More

</a>

</div>

</ItemTemplate>

</telerik:RadRotator>

</div>

</div>

<asp:XmlDataSource ID="xmlDataSource1" runat="Server" DataFile="~/App_Data/NewsRotator.xml"></asp:XmlDataSource>

</

div>

[Serrin]

Heya Cade,

Check out a little ways down in this post, looks like you can override the background with some custom CSS:

RadRotator customization post

Hope this was helpful. :)

[Serrin]

It was bugging the heck out of me, so I spent the last half hour figuring out how this works...

Here is the code to get this to work:

<style type="text/css">

.RadRotator_Default .radr_clipRegion
{
    width: 100%;
    height: 100%;
         background-color: Transparent;
    overflow: auto;
    position: absolute;
}
.newsFeed
   {
        background: url('newsFeedBgr.gif') no-repeat;
        background-color: Green;
        width: 438px;
        height: 42px;
        padding: 14px 0 0 20px;
        margin: 0 0 2px 0;
    }
</style>

Note the background-color: Transparent;, that is the key here. :)

Here's the rotator I used to test:

       <telerik:RadRotator ID="RadRotator1" RotatorType="AutomaticAdvance"
    ScrollDirection="Up" ScrollDuration="2000" runat="server" DataSourceID="xmlDataSource1"
            Width="450" Height="200" FrameDuration="1" InitialItemIndex="-1" CssClass="RadRotator_Default" >
            <ItemTemplate>
                <div class="newsFeed">
                    <strong><a href='<%# XPath("link") %>'>
                        <%# System.Web.HttpUtility.HtmlEncode(XPath("title").ToString())%>
                    </a></strong>
                    <br />
                    <%# XPath("pubDate") %>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
        <asp:XmlDataSource ID="xmlDataSource1" XPath="rss/channel/item" runat="server" DataFile="http://blogs.telerik.com/Blogs.rss">
        </asp:XmlDataSource>

It's nice when you figure something out on a Friday afternoon. ;D

[Matt]

Hi,

I'm still having this problem, but in a slightly specific situation.  I have tried Q2 and Q3 controls and they act the same.

In IE7 (not firefox) the second and subsequent frames of the rotator change to white, BUT only when my rotator is set to either...

SlideShowAnimation-Type="Fade"

or

SlideShowAnimation-Type="Pulse"

If it set it to "None" it works fine.

Here is my rotator code...

<telerik:RadRotator Skin="Default" RotatorType="SlideShow" SlideShowAnimation-Type="None" SlideShowAnimation-Duration="500" FrameDuration="3000" width="350px" height="60px" ItemWidth="350px" ItemHeight="60px" runat="server" id="Rotator">
    <Items>
        <telerik:RadRotatorItem>
            <ItemTemplate>
                Some text here
            </ItemTemplate>
        </telerik:RadRotatorItem>
    </Items>
    <Items>
        <telerik:RadRotatorItem>
            <ItemTemplate>
                Some more text here
            </ItemTemplate>
        </telerik:RadRotatorItem>
    </Items>
</telerik:RadRotator>

[Fiko]

Hello Tony,

I am not quite sure what exactly do you mean when you say "frames of the rotator change to white". I have tried your code and I cannot see white frames in RadRotator control.
Could you please provide more information about the issue or open a new support ticket and send me a simple demo project where I can observe the problem? Once I have a better view over your setup, I will do my best to help.

Best wishes,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Matt]

Hi,

I have played a little more so I can better explain the situation.

Using the code below it seems that when the rotator is set to eithe SlideShowAnimation-Type="Fade" or SlideShowAnimation-Type="Pulse" the rotators 2nd and susequent frames "cut" through to the body's background image to the background colour.  Try changing the body's background colour.

If you set the rotator to SlideShowAnimation-Type="None", it works as expected with the background image behind all frames.

<asp:ScriptManager ID="ScriptManager" runat="server" />
<style>
body
{
    background:#202020 url(../Images/body-bg.jpg) repeat-x left top;
}
.radr_Default .radr_clipRegion
{
    width:100%;
    height:100%;
    background-color:transparent !important;
    overflow:auto;
    position:absolute;
}
</style>
<div>
    <telerik:RadRotator Skin="Default" RotatorType="SlideShow" SlideShowAnimation-Type="Fade" SlideShowAnimation-Duration="500" FrameDuration="3000" width="350px" height="60px" ItemWidth="350px" ItemHeight="60px" runat="server" id="Rotator">
        <Items>
            <telerik:RadRotatorItem>
                <ItemTemplate>
                    Some text here
                </ItemTemplate>
            </telerik:RadRotatorItem>
        </Items>
        <Items>
            <telerik:RadRotatorItem>
                <ItemTemplate>
                    Some more text here
                </ItemTemplate>
            </telerik:RadRotatorItem>
        </Items>
    </telerik:RadRotator>
</div>

[Fiko]

Hello Tony,

Thank you for the clarification - now I was able to reproduce the problem. This behavior is browser specific and with the current animation mechanism it is not possible to override it. The good news is that we are currently reworking the RadRotator's animations and we are implementing the jQuery effects in it.  The new feature will be available in the middle of March with the Q1 2009 version of the controls.


Best wishes,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.