This is a migrated thread and some comments may be shown as answers.

Navbar (Mobile) - Hide empty overflow anchor

2 Answers 51 Views
NavBar
This is a migrated thread and some comments may be shown as answers.
ptw
Top achievements
Rank 1
ptw asked on 18 Oct 2016, 07:25 AM

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 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 19 Oct 2016, 12:44 PM
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.
 
0
ptw
Top achievements
Rank 1
answered on 19 Oct 2016, 12:49 PM

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

Best regards

- Paul

Tags
NavBar
Asked by
ptw
Top achievements
Rank 1
Answers by
Stefan
Telerik team
ptw
Top achievements
Rank 1
Share this question
or