Initially Hidden Rotator Does Not Show
An initially hidden rotator that you show with CSS (e.g., @media
query and a browser resize—Example 2) does not show up and still stays collapsed, or does not change its items.
This happens because the initial state of the element was hidden and the control cannot calculate the animations.
To fix this, call the repaint
client-side method after you show it. Example 1 shows a basic JavaScript function you can use.
function repaintRotator() {
$telerik.$(".RadRotator").each(function (index, elem) {//get all rotators
//check if it is visible before repainting + defensive checks to ensure errors are not thrown
if (elem && elem.control && $telerik.$(elem).is(":visible") && elem.control.repaint) {
elem.control.repaint();
}
});
}
<telerik:RadPageLayout runat="server" ID="ContentPageLayout">
<Rows>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn HiddenMd="true" HiddenSm="true" HiddenXs="true" Span="8">
<telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" RotatorType="AutomaticAdvance" ScrollDuration="500" FrameDuration="100" ItemWidth="655px" ItemHeight="320px" Width="655px" Height="320px" ScrollDirection="Left">
<Items>
<telerik:RadRotatorItem>
<ItemTemplate>
first item
</ItemTemplate>
</telerik:RadRotatorItem>
<telerik:RadRotatorItem>
<ItemTemplate>
second item
</ItemTemplate>
</telerik:RadRotatorItem>
</Items>
</telerik:RadRotator>
</telerik:LayoutColumn>
<telerik:LayoutColumn HiddenMd="false" HiddenSm="false" HiddenXs="false" Span="4">
start your browser small and maximize it
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
</Rows>
</telerik:RadPageLayout>
<script>
function repaintRotator() {
$telerik.$(".RadRotator").each(function (index, elem) {//get all rotators
//check if it is visible before repainting + defensive checks to ensure errors are not thrown
if (elem && elem.control && $telerik.$(elem).is(":visible") && elem.control.repaint) {
elem.control.repaint();
}
});
}
var TO = false;
$telerik.$(window).resize(function () {
if (TO !== false)
clearTimeout(TO);
TO = setTimeout(repaintRotator, 200); //200 is time in milliseconds
});
</script>