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

Overlapping on rotator xml

6 Answers 33 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Felice
Top achievements
Rank 1
Felice asked on 16 Feb 2014, 06:33 PM
Hi,
I am trying to replicate this demo to have a starting point for the feature I would like to implement in my project.
I am experiencing a weird  little problem that I am not able to solve. Please look at the attached picture, there is an overlapping on the top side of the rotating items on the external frame.
I have copied 100% code, style sheet and pictures from the demo. I tried to touchup the css but I am not coming right.
Could you please advice about which property I should tune-up to solve this issue?

Thanks a lot for supporting,
Felice

6 Answers, 1 is accepted

Sort by
0
Felice
Top achievements
Rank 1
answered on 16 Feb 2014, 06:38 PM
I had an error on posting and the picture was not attached. Please see the pic here.
0
Felice
Top achievements
Rank 1
answered on 16 Feb 2014, 06:40 PM
Picture 
0
Felice
Top achievements
Rank 1
answered on 16 Feb 2014, 06:41 PM
0
Felice
Top achievements
Rank 1
answered on 17 Feb 2014, 12:56 PM
I try again to attach the picture!
0
Accepted
Slav
Telerik team
answered on 19 Feb 2014, 03:24 PM
Hello Felice,

The displacement of the RadRotator control on your end is due to the CSS class qsf-clear-float, which is used in the br HTML element that separates the rotator from the div element above the control:
<div class="titleText">
    Data streamed live from <a href="http://feeds.feedburner.com/Telerik">http://feeds.feedburner.com/Telerik<;/a><br />
</div>
<br class="qsf-clear-float" />
<telerik:RadRotator ID="RadRotator1" RotatorType="AutomaticAdvance" ScrollDirection="Up"
    ScrollDuration="2000" runat="server" Width="493"
    ItemWidth="493" Height="192" ItemHeight="64" FrameDuration="1" InitialItemIndex="-1"
    CssClass="rotator">

This CSS class is defined in the common style sheets of the demos application and you have most probably missed to include its definition in your project. Please add the following either on the page or in the referenced style sheet and the problem should be resolved:
.qsf-clear-float {
    border: 0 none;
    clear: both;
    height: 1px;
    margin-top: -1px;
}


Regards,
Slav
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Felice
Top achievements
Rank 1
answered on 01 Mar 2014, 08:40 PM
Thank you Slav. It solved my problem.

Felice
Tags
Rotator
Asked by
Felice
Top achievements
Rank 1
Answers by
Felice
Top achievements
Rank 1
Slav
Telerik team
Share this question
or