Menu and Bootstrap

9 posts, 0 answers
  1. Adrian
    Adrian avatar
    1 posts
    Member since:
    Nov 2013

    Posted 09 Dec 2013 Link to this post

    Since all the new web project templates in VS 2013 seem to use Bootstrap it would seem Microsoft have adopted this as their "default" layout template. As such I'd expect the Kendo UI libraries to work seamlessly with Bootstrap.

    I have seen some documentation on this but the only guidance I can find on using the Kendo UI menu control with Bootstrap was this unanswered post on StackOverflow:
    http://stackoverflow.com/questions/17729394/how-do-i-modify-the-kendo-ui-menus-default-html

    So, to restate the question, what is the right way to use the Keno Menu control to put a drop down menu into the Bootstrap nav bar?
  2. Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 10 Dec 2013 Link to this post

    Hello Adrian,

    If I understand you correctly, you would like to insert a Kendo UI Menu into a Bootstrap navbar and the Kendo UI Menu should adopt the same behavior, which is observed at:

    http://getbootstrap.com/examples/navbar/

    Unfortunately, this is not possible, as the Kendo UI Menu has been designed with different behavior and we have no intentions to couple it so tightly with the Bootstrap nav bar. What we could do in the future is to make the Kendo UI Menu switch from horizontal to vertical layout, depending on the browser viewport size. You can vote for such a feature at:

    http://feedback.kendoui.com/

    As far as compatibility goes, Kendo UI now works with Bootstrap 3 CSS on the page, which used not to be the case, because Bootstrap 3 enforces non-default reverse box model on all elements on the page, which breaks all content, which relies on the default box model.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Mark
    Mark avatar
    5 posts
    Member since:
    Oct 2013

    Posted 19 Sep 2014 in reply to Dimo Link to this post

    Hi Dimo,
    Just wondering if you guys have done this?

    "What we could do in the future is to make the Kendo UI Menu switch from horizontal to vertical layout, depending on the browser viewport size."

    It would be great if the menu changed on a mobile device rather then just outputting the same html as for a desktop.

    Regards,
    Mark
  4. Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 19 Sep 2014 Link to this post

    Hi Mark,

    The discussed behavior is still not supported, I am afraid. The demand for it is lower than other features and widgets that we are currently working on.

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

     
  5. Mark
    Mark avatar
    5 posts
    Member since:
    Oct 2013

    Posted 19 Sep 2014 in reply to Dimo Link to this post

    Hi Dimo,

    Maybe I am asking the wrong question.

    Does your menu automatically change to render for a mobile or desktop device?

    This is the sort of functionality I wanted http://slicknav.com/ you can try to resize the screen and menu changes to suit a mobile device.  I cant find this in the docs, but would have expected it since your widgets are responsive.

    Regards,
    Mark


  6. Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 22 Sep 2014 Link to this post

    Hello Mark,

    Yes, I was referring to exactly the same behavior that you have shown, when I said that it is not supported.

    Generally, you can achieve the desired behavior with two menus with toggled visibility, depending on the viewport width - one horizontal and one context that is attached to a custom icon.

    http://demos.telerik.com/kendo-ui/menu/events

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

     
  7. john
    john avatar
    9 posts
    Member since:
    Nov 2014

    Posted 12 Feb in reply to Dimo Link to this post

    Since there's such a massive problem being compatible with bootstrap, what should we choose when we convert a MVC app to a telerik app? The wizard that prompts you does NOT tell you if a style framework is based on, except for the one that specifically says "bootstrap".
  8. john
    john avatar
    9 posts
    Member since:
    Nov 2014

    Posted 12 Feb in reply to Dimo Link to this post

    By "style framework", I meant "theme". There are currently 10 themes to select from, and only one says bootstrap. Are the rest not bootstrap?
  9. Dimitar
    Admin
    Dimitar avatar
    667 posts

    Posted 14 Feb Link to this post

    Hello John,

    For a generic way of working with both Bootstrap and Kendo UI I would suggest the following:

    • When working with Bootstrap 3, use the Kendo UI Bootstrap Less Theme, as it is specifically designed to accommodate to Bootstrap 3. You can read more about the Bootstrap 3 and Kendo Bootstrap theme integration in the following article.

    • When working with Bootstrap 4, use the Kendo UI Bootstrap v4 Sass Theme. The Kendo Bootstrap v4 theme has linked variables to Bootstrap in order to achieve similarity in the look and feel. Therefore, customizing the original Bootstrap theme will also affect the Kendo UI theme.

    The above does not mean that the rest of the themes are not compatible with Bootstrap but rather emphasizes that the Kendo Less Bootstrap and Sass Bootstrap themes are specifically designed with the above-described versions of Bootstrap.

    Additional information regarding the usage and customization of the Kendo UI Themes can be found in the Less-Based Themes Documentation and the Sass-Based Themes Documentation.

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboard and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top