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

Image transition layout problem

2 Answers 40 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Scott asked on 08 Jul 2014, 08:00 AM

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 Answers, 1 is accepted

Sort by
Maria Ilieva
Telerik team
answered on 11 Jul 2014, 08:56 AM
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.

Top achievements
Rank 1
answered on 18 Jul 2014, 07:43 AM
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
Asked by
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Top achievements
Rank 1
Share this question