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

How to add a menu to the AppBar?

3 Answers 39 Views
AppBar
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 1
Jack asked on 15 Dec 2020, 10:28 AM

I am trying to replace a Bootstrap navbar with a Kendo UI appbar and I am facing two issues:

1) The embedded menu pops up within the appbar as in https://dojo.telerik.com/oPEbOmIX. How to fix this?

2) The appbar wraps controls on a second line when resizing.Is this the only behaviour? What is your suggestion for a more responsive approach?

3 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 17 Dec 2020, 08:33 AM

Hi Jacques,

Thank you for the provided code snippets. Indeed, the z-index of the menu is strong enough to be visible at the top-most level of the page. However, the AppBar widget has its overflow rule set to "hidden", therefore any elements that overflow will be cut regardless of the z-index. What I can recommend is that you modify the overflow as follows:

  <style>
    #appbar{
      overflow: initial;
    }
  </style>

As per the responsiveness, the AppBar actually renders any HTML inside its element. Therefore, it cannot predict when and how to redesign its content to make it more compact. This actually has to be implemented by the developer according to the HTML that is inside the widget.

 

Best regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
guntur
Top achievements
Rank 1
answered on 19 Feb 2021, 04:31 AM
when I'm making the navbar for my site, I do have same issues, to fix is at styling overflow and z-index
0
Tsvetomir
Telerik team
answered on 19 Feb 2021, 07:19 PM

Hi guntur,

Thank you for sharing what has worked out in your case. Indeed, the z-index is supposed to be large enough already. What was causing the issue is that the overflow was not allowing the elements to be shown regardless of the z-index. 

 

Best regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
AppBar
Asked by
Jack
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
guntur
Top achievements
Rank 1
Share this question
or