Navbar (Mobile) - Hide empty overflow anchor

[ptw]

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>

[Stefan]

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

 

 

[ptw]

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

Best regards

- Paul