Overlapping on rotator xml

7 posts, 1 answers
  1. Felice
    Felice avatar
    198 posts
    Member since:
    Aug 2013

    Posted 16 Feb 2014 Link to this post

    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
  2.
  3. Felice
    Felice avatar
    198 posts
    Member since:
    Aug 2013

    Posted 16 Feb 2014 in reply to Felice Link to this post

    I had an error on posting and the picture was not attached. Please see the pic here.
  5. Felice
    Felice avatar
    198 posts
    Member since:
    Aug 2013

    Posted 16 Feb 2014 in reply to Felice Link to this post

    Picture 
  7. Felice
    Felice avatar
    198 posts
    Member since:
    Aug 2013

    Posted 16 Feb 2014 in reply to Felice Link to this post

    The picture does not like to be loaded.   <a href="http://it.tinypic.com?ref=2lkfv5u" target="_blank"><img src="http://i58.tinypic.com/2lkfv5u.jpg" border="0" alt="Image and video hosting by TinyPic"></a>
  8.
  9. Felice
    Felice avatar
    198 posts
    Member since:
    Aug 2013

    Posted 17 Feb 2014 in reply to Felice Link to this post

    I try again to attach the picture!
  11. Answer
    Slav
    Admin
    Slav avatar
    1359 posts

    Posted 19 Feb 2014 Link to this post

    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.
  13. Felice
    Felice avatar
    198 posts
    Member since:
    Aug 2013

    Posted 01 Mar 2014 in reply to Slav Link to this post

    Thank you Slav. It solved my problem.

    Felice
  14.
Back to Top