Image transition layout problem

3 posts, 0 answers
  1. Scott
    Scott avatar
    5 posts
    Member since:
    Apr 2014

    Posted 08 Jul 2014 Link to this post

    We're currently experiencing an issue with the RadImageGallery, where the images are offset to the right half of the image area (please see attached screenshot)

    This behaviour only occurs when a transition is in progress- after the transition is complete, the image displays correctly.

    It's a freshly created project, no other CSS sources.

    Oddly enough it displays correctly in IE9 (out of compatibility view), but the problem is apparent on IE9 (in compatibility view), Chrome (35.0.1916.153m), Firefox (27.0.1), and in the browser on my android handset.

    Here is the captured CSS when the transition is in progress:

    <div id="ctl00_MainContent_RadImageGallery1_ImageWrapper" 
    class="rigActiveImage" style="width: 100%; height: 100%; visibility: 
    visible;"><img style="width: 873px; padding-left: 0px; padding-top: 0px; 
    opacity: 0.07022499999999987; position: absolute;" 
    src="images/food/image027.jpg"><img style="width: 873px; padding-left: 
    0px; padding-top: 0px; position: absolute; opacity: 0.9304772499843036;" 
    src="images/food/image042.jpg"><div class="rigToolsWrapper"><div 
    class="rigDescriptionBox" style="display: none;"><h4 
    class="rigTitle">Mmmm... Food</h4><p 
    class="rigDescription">Description text will go 
    here</p></div><div class="rigDotList"><a href="#" 
    class="rigCurrentItem"><span></span></a><a href="#" 
    class=""><span></span></a><a href="#" 

    The telerik control code:

    <telerik:RadImageGallery ID="RadImageGallery1" runat="server" DisplayAreaMode="Image" LoopItems="true" Width="873" Height="582" >
        <ThumbnailsAreaSettings Mode="ImageSlider" />
            <AnimationSettings SlideshowSlideDuration="5000">
                <NextImagesAnimation Speed="1000" Type="Fade" />
                <PrevImagesAnimation Speed="1000" Type="Fade" />
        <ToolbarSettings ShowSlideshowButton="false" Position="Bottom" ShowItemsCounter="false" ShowFullScreenButton="false" ShowThumbnailsToggleButton="false" />
            <telerik:ImageGalleryItem Title="TestImage1" ImageUrl="images/food/image042.jpg" description="Description text will go here"/>
            <telerik:ImageGalleryItem Title="TestImage2" ImageUrl="images/food/image055.jpg" description="Description text will go here"/>
            <telerik:ImageGalleryItem Title="TestImage3" ImageUrl="images/food/image027.jpg" description="Description text will go here"/>

    Can this be fixed by CSS or other means?

    Many thanks
  2. Maria Ilieva
    Maria Ilieva avatar
    4017 posts

    Posted 11 Jul 2014 Link to this post

    Hello Scott,

    I tried to replicate the problematic behavior using your code however the RadImageGallery behaves correctly in all browsers even in IE9 in Compatibility View.
    Find my test project attached and verify what the difference in your case is.

    Maria Ilieva

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft R3 2016 release webinar banner
  4. Scott
    Scott avatar
    5 posts
    Member since:
    Apr 2014

    Posted 18 Jul 2014 Link to this post

    Hi Maria,

    Many thanks for the barebones project, I tested this successfully on the server.

    It appears to have been a grumble with the standard CSS and text-align:center being set for the default project in Visual Studio- but all cured now- noted for future reference!

    Kind regards
Back to Top