Rendering issue with RadToolBarSplitButton on Mac and iPad

5 posts, 1 answers
  1. Dylan
    Dylan avatar
    4 posts
    Member since:
    Nov 2011

    Posted 23 Apr 2014 Link to this post

    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
  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 28 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dylan
    Dylan avatar
    4 posts
    Member since:
    Nov 2011

    Posted 28 Apr 2014 in reply to Dimitar Link to this post

    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
  5. Answer
    Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 30 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Dylan
    Dylan avatar
    4 posts
    Member since:
    Nov 2011

    Posted 05 May 2014 in reply to Dimitar Link to this post

    Thank you! This worked perfectly.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017