Radrotator Control Buttons Problem

[Peeyush]

Hello,

I am using a RadAjax radrotator with control buttons images(left and right scroll) of my own, i have done so but i am facing problems regarding the state of buttons ie. enable and disable the control buttons when on last and first record accordingly,  and also facing screen resolution issues with the buttons as i have applied some css with the button though the buttons work fine but alignment of button is disturbed.  I am attaching some code snippets.  I would appreciate any help you could give on this.

Note-  I am using RadTagcloud control inside the radrotator and using left and right to monitor the tagclouds related to particular product.
Thanks,
Peeyush Pandey

                      <td style=" float: left;width: 0px;margin-left: -1px;">
                          <asp:Image ImageUrl="images/b2.png" ID="img_right" Visible="false" AlternateText="right" runat="server"
                              Style="cursor: hand; float: right; padding-left: 990px; margin-top:75px;" />
                          <asp:Image ImageUrl="images/b1.png" ID="img_left" Visible="false" AlternateText="left" runat="server"
                              Style="cursor: hand; float: left; margin-top:75px; margin-left:-25px;" />

                          <telerik:RadRotator ID="radRotatorCompanyTagCloud" runat="server" ScrollDuration="500"  WrapFrames="false" Width="990px"
                              Height="400px" RotatorType="Buttons" ItemHeight="350px">
                              <ControlButtons LeftButtonID="img_left" RightButtonID="img_right" />
</telerik:RadRotator>

[Slav]

Hello Peeyush,

Please note that when the scrolling reaches the first or the last item of the RadRotator, the corresponding control button is disabled, regardless of its visual appearance. You can use transparency in order to mark the inactive buttons. By adding the following CSS code in the head section of your page, the desired effect will be achieved:

.rrButtonDisabled
{
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

 
My suggestion is to check the online demo Rotator / Thumb Scroller, which contains a good example of properly configured custom control buttons and by my opinion will help you as a reference for achieving the desired setup in your actual project.

Best wishes,
Slav
the Telerik team

[Peeyush]

Thanx!

The enabling and disabling of control buttons problem is solved,  but the content of the tagcloud gets cut as i have set the item-width property of rad tagcloud to 350px, and when the content ie. tag clouds are larger than this the overflow is skipped, it usually happens due to screen resolution, i tried setting the word-wrap css but it did not help.

If you have any idea please help

Warm Regards,
Peeyush

[Niko]

Hello,

Unfortunately I am unable to reproduce the issue on my side. Therefore I should ask you to provide the setup that you are using so that I can run and investigate it. 

Regards,
Niko
the Telerik team

[Peeyush]

You would get this if you reduce your screen resolution.

Thanx!

[Niko]

Hello Peeyush,

From your explanations I should assume that the width of the browser's window is so small that the rotator is truncated on the right side. This is an expected behavior as the dimensions are fixed and the boxes are displayed with the size that is already predefined. A way to work around this is to use javascript to calculate how much of the rotator is outside the bounds of the window and subtract it from the width of the tag cloud:

tagCloud.set_width(parseInt(tagCloud.get_width()) - pxOutsideWindow)

Hope this helps.

All the best,
Niko
the Telerik team