Rotator coverflow buttons overdisplayed when lightweight rendering

[PaulH]

I have a page which displays a number of images in a RadRotator set in CoverFlowButtons mode. I've recently upgraded the controls to the latest release and added the RenderMode="Auto" option but when run in a modern browser (so using Lightweight or Mobile rendering) the left and right buttons display inside the area of the control where the images reside. So, in its initial state the right button is displayed over by an image and if I scroll the images so that the early images scroll off the left side, in the process they overdisplay the left button. If I switch the Rotator back to "Classic" RenderMode then the buttons correctly display outside the main control area correctly. Is this a bug or something I can manipulate in the styles?

If it helps, the Rotator is full width of the page along the bottom. The containing div has left and right padding of 10px.

Thanks in advance

[Vessy]

Hi Paul,

I tried to reproduce the described issue but to no avail. Could you please provide more details regarding the specific scenario in which the problem occurs? It would be really helpful if you isolate the issue into a sample fully runnable project like (described in this blog post) and send it for a further investigation?

Thank you in advance for your cooperation.

Regards,
Vessy
Telerik

 

 

[Vessy]

Hi Paul,

This is a follow-up to my previous reply.

We tested the RadRotator in different scenarios and managed to reproduce the described issue when the Rotator styles are registered through the StyleSheetManager in a similar way:

<telerik:RadStyleSheetManager runat="server" ID="RadStyleSheetManager1">
    <StyleSheets>
        <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Rotator.css" />
        <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Rotator.Default.css" />
    </StyleSheets>
</telerik:RadStyleSheetManager>

The issue with this configuration comes from the fact the the LightWeight styles are located in different files:

<telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.RotatorLite.css" />
<telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.DefaultLite.Rotator.Default.css" />

A possible approach you can use in such scenario could be to check the current RenderMore and register the corresponding styles depending on the result For example:

<telerik:RadStyleSheetManager runat="server" ID="RadStyleSheetManager1">
</telerik:RadStyleSheetManager>

<telerik:RadRotator ID="RadRotator1" runat="server" RenderMode="Auto" RotatorType="CoverFlowButtons">
    ...
</telerik:RadRotator>

protected void Page_Load(object sender, EventArgs e)
{
    string assembly = "Telerik.Web.UI";
    string rotatorStyles = string.Format("Telerik.Web.UI.Skins.Rotator{0}.css",
        RadRotator1.ResolvedRenderMode == RenderMode.Lightweight ? "Lite" : "");
    string rotatorStylesDefault = string.Format("Telerik.Web.UI.Skins.Default{0}.Rotator.Default.css",
        RadRotator1.ResolvedRenderMode == RenderMode.Lightweight ? "Lite" : "");
    RadStyleSheetManager1.StyleSheets.Add(new StyleSheetReference(rotatorStyles, assembly));
    RadStyleSheetManager1.StyleSheets.Add(new StyleSheetReference(rotatorStylesDefault, assembly));
}

I hope this helps.

Regards,
Vessy
Telerik

 

 

[PaulH]

Hi Vessy and thanks for your response.

I've not been using the StyleSheetManager at all. I have a master page and the page in question has a RadRotator in a div at the bottom of the page, which I use jQuery to hide and show on the press of a button. In order to get the Rotator to initialise correctly, I show it and hide it again in the ready event. After this the user can choose to click to show the Rotator if required. It then contains a list of "slides" which helps the user to navigate to places within their presentation. I have no idea if any of this has a bearing on the situation.

I added the StyleSheetManager to my page as per your example (in the asp:Content section before the RadScriptManager) and added the necessary code behind too but it doesn't appear to alter how the RadRotator is presented when the mode is set to Auto. I'm using what I believe to be the latest Web.UI and Web.UI.Skins libraries 2014.2.724.40.

Any suggestions?

Thanks and regards

[Slav]

Hi Paul,

It appears that the problem is related to incorrect rendering when the Lightweight render mode of RadRotator is enabled in IE and Opera. It is reported to our developers, however I cannot provide a firm estimation when it will be fixed.

You can set the RenderMode to Classic so that the rotator is displayed correctly until the problem is resolved. The bug is logged in our feedback portal, so you can also use the following item to track its progress, vote for it and comment it: http://feedback.telerik.com/Project/108/Feedback/Details/134983

I have updated your Telerik points as a token of gratitude for reporting this bug.

Regards,
Slav
Telerik

 

 

[PaulH]

Hi Slav

I've set the mode to classic for now and I'll look out for an update later.

Thanks and regards

Paul.