Navbar (Mobile) - Hide empty overflow anchor

3 posts, 1 answers
  1. ptw
    ptw avatar
    27 posts
    Member since:
    Sep 2015

    Posted 18 Oct 2016 Link to this post


    I have a mobile navbar / toolbar. It only has one item, but is showing an empty Overflow Anchor (see image attached). How can remove the overflow anchor? (Or is there some method to flag for it to auto-hide itself when it's empty?)

    I'm trying to adapt the Kendo Mobile demo here:

    My code follows.



    01.<div data-role="toolbar" style="min-width: 600px;" data-items='[
    02.  {
    03.    type: "splitButton",
    04.    id:   "userDisplayName",
    05.    icon: "contacts",
    06.    text: "Joe User",
    07.    align:"right",
    08.    overflow: "never",
    09.    menuButtons: [
    10.      {
    11.        id:  "editProfile",
    12.        icon: "settings",
    13.        text: "edit profile"
    14.      },
    15.      {
    16.        id:   "logout",
    17.        icon: "history",
    18.        text: "Logout"
    19.      }
    20.    ]
    21.  }        
  2. Answer
    Stefan avatar
    3078 posts

    Posted 19 Oct 2016 Link to this post

    Hello Paul,

    The Overflow anchor is displayed by design even of there are no overflow items.

    If you want to hide it based on some condition, I can suggest using CSS and custom CSS class which will be added when the anchor has to be hidden. You can use a similar CSS selector in order to access the needed DOM element:

            visibility: hidden !important;

    Then use jQuery to add and remove the custom CSS class from the NavBar:

    I hope this will help to achieve the desired result.

    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. ptw
    ptw avatar
    27 posts
    Member since:
    Sep 2015

    Posted 19 Oct 2016 in reply to Stefan Link to this post

    Many thanks Stefan. That's a very clear and useful response.

    Best regards

    - Paul

Back to Top