Image transition layout problem

[Scott]

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 asp.net 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="#"
class=""><span></span></a></div></div></div>

The telerik control code:

<telerik:RadImageGallery ID="RadImageGallery1" runat="server" DisplayAreaMode="Image" LoopItems="true" Width="873" Height="582" >

    <ThumbnailsAreaSettings Mode="ImageSlider" />

    <ClientSettings>

        <AnimationSettings SlideshowSlideDuration="5000">

            <NextImagesAnimation Speed="1000" Type="Fade" />

            <PrevImagesAnimation Speed="1000" Type="Fade" />

        </AnimationSettings>

    </ClientSettings>

    <ToolbarSettings ShowSlideshowButton="false" Position="Bottom" ShowItemsCounter="false" ShowFullScreenButton="false" ShowThumbnailsToggleButton="false" />

    <Items>

        <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"/>

    </Items>

</telerik:RadImageGallery>



Can this be fixed by CSS or other means?

Many thanks

[Maria Ilieva]

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.

Regards,
Maria Ilieva
Telerik

 

 

[Scott]

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