RadMenu with RepeatColumns renders as single column with bootstrap

4 posts, 0 answers
  1. Stephen
    Stephen avatar
    3 posts
    Member since:
    Aug 2011

    Posted 05 May 2014 Link to this post

    Hi,

    When using bootstrap, the RadMenu with RepeatColumns = 2 setting renders as single column because bootstrap forces the box-sizing: border-box rule. If we include this CSS rule, the multi-column render correctly:

    ul.rmMultiColumn
    {
       box-sizing: content-box;
    }

    Please include the box-sizing rule into the RadMenu out of the box. Thanks,
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 06 May 2014 Link to this post

    Hello Stephen,

    The box-sizing rule is already include in the RadMenu. We have tested the RadMenu with multicolumn with applying Bootstrap on the page, but the issue did not reproduce. We are sending you this video for your reference. Please let me know if you have missed something important. Could you also clarify what version of RadMenu and what version of Bootstrap are you applying?

    Regards,
    Magdalena
    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. Stephen
    Stephen avatar
    3 posts
    Member since:
    Aug 2011

    Posted 06 May 2014 in reply to Magdalena Link to this post

    Hi Magdalena,

    We're running Telerik 2013.2.717.40 and Bootstrap 2. The culprit line in bootstrap is due to this rule:

    *, *:before, *:after
    {
      -webkit-box-sizing: border-box;-
      moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    Do you know which version of Telerik has this fix included in RadMenu?
  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 07 May 2014 Link to this post

    Hello Stephen,

    I would like to confirm that we tested the a scenario with RadMenu version 2013_2_717 and Bootstrap 2.0.1 but we were not able to replicate the described problem. Could you please confirm that the problem you are facing is that the second column of items for some reason goes on the next line right below the first one. So eventually it looks like the RadMenu items are rendered in a single column instead of two? 

    Please note that we have tested the both render mode - the classic and the lightweight. We are sending you this video for your reference. We are sending you the tested project in the attachment. Please let me know if there is something different in your scenario that I am missing.

    Thank you for your understanding.

    Regards,
    Magdalena
    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.

     
Back to Top