Navbar (Mobile) - Hide empty overflow anchor

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

    Posted 18 Oct Link to this post

    Hi,

    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: http://demos.telerik.com/php-ui/m/index#navbar/adaptive-toolbar

    My code follows.

    Thanks.

    -Paul

    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.  }        
    22.]'>
    23.</div>
  2. Answer
    Stefan
    Admin
    Stefan avatar
    272 posts

    Posted 19 Oct 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:

    .customClass div.k-overflow-anchor.km-button{
            visibility: hidden !important;
    }

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

    https://api.jquery.com/addclass/

    https://api.jquery.com/removeclass/

    I hope this will help to achieve the desired result.

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

    Posted 19 Oct 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