Rendering issue with RadToolBarSplitButton on Mac and iPad

[Dylan]

I have a rendering issue with RadToolBarSplitButton on Mac and iPad (see ResourceButton.png attachment) where the button overflows its border by a few pixels on the right hand side, but this happens only on Macs and on iPads in Safari when we click the button to make it dropdown and reveal the subitems. We have no problems with this on windows machines in all the browsers we've tested. How can I fix this? I'm using telerik version 2013.2.717.40 and runtime version v4.0.30319.

Thanks,

Dylan

[Dimitar]

Hello Dylan,

I have tested the described scenario locally with Telerik UI for ASP.NET AJAX version 2013.2.717.40 and .NET v4.0. Unfortunately, I could not reproduce your issue, neither on iOS 6.1.3 Safari and iOS 7 Safari, nor on Mac OSX Safari 7.

In all cases I achieved well structured RadToolBar with RadToolBarSplitButtons as the ones that could be seen on the Item Types RadToolBar online demo. The online demo is running with UI for ASP.NET AJAX version 2014.1.403.40.

I would suggest that you try to isolate the code that causes the issue by removing bits of code, external css, changing width property values and checking if the issue persists after each change.
Another option is to check if upgrading the UI for ASP.NET AJAX version would fix the issue - you may use trial dlls for a quick check.

If you need additional assistance to overcome the issue, in order to assist you in the most efficient way I would kindly suggest that you provide us with a very simplified runnable project (aspx, code behind and CSS) that demonstrates the behavior that you describe. Thus, we could test it locally and determine what might be causing the issue that you are experiencing.

Regards,
Dimitar
Telerik

 

 

[Dylan]

Thanks for your response. I tried commenting out ALL CSS, but this didn't remove the overflow problem at all. So then I expanded the width of the radtoolbarsplitbutton and it removed the problem of overflowing the borders, but it creates a new problem, as
shown in the attached screenshot. Now, when you hover over the button, you can see a little rectangle appear in the bottom right hand corner. I'm guessing this is some kind of spacer gif. Is there any way I can prevent this little visual artifact from appearing?

Thanks

[Dimitar]

Hi Dylan,

The easiest way to avoid this layout issue is to remove the "Width" property of the RadToolBarSplitButton and let it adjust its size according to content set. This approach is expected to produce the best and most consistent layout results in all browsers.

If you need, however, to keep the "Width" property, in order to remove that little rectangle you need to set width value very close to the one, rendered without the property specified. I have tested it with "Resources" as a RadToolBarSplitButton text and Outlook skin - it is about 89 px. You may test it on your own until you achieve the best result.

Regards,
Dimitar
Telerik

 

 

[Dylan]

Thank you! This worked perfectly.