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

AppBar with MenuBar

4 Answers 19 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 07 Dec 2020, 01:09 PM
Will the MenuBar work inside the new AppBar component? I've placed a menubar inside but the menu items disappear under the exterior appbar. Is there a workaround or solution to this?

4 Answers, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 10 Dec 2020, 12:34 PM

Hello Mark,

Thank you for this interesting case. 

In order to achieve the desired behavior, I would recommend setting the z-index of the components. This approach will give the opportunity to show the menu items over the appbar. 

I hope this information helps. If further assistance is needed, send me an isolated sample project or a dojo example with the implementation. I will try my best to resolve this one quickly.

 

Kind Regards,
Anton Mironov
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
Anton Mironov
Telerik team
answered on 17 Dec 2020, 10:58 AM

Hello Mark,

I tried to implement the pointed behavior and replicate the issue.

The reason for the faulty behavior is that the appbar has set its own style "overflow: hidden" and everything that overflows the appbar is cut. The approach that I could recommend is to override the overflow style of the appbar. Try adding the following style:

  <style>
    .k-appbar{
          overflow: visible;
    }
  </style>
The complete implementation could be found in the following dojo example:
Give the approach above a try and let me know if further assistance is needed.

 

Best Regards,
Anton Mironov
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
Mark
Top achievements
Rank 1
answered on 18 Dec 2020, 03:12 PM
Thanks Anton. That's brilliant! I've confirmed that works and is just what I wanted.
0
Anton Mironov
Telerik team
answered on 18 Dec 2020, 03:22 PM

Hi Mark,

I am glad to hear that the issue you were facing is now resolved. 

I used this interesting case to create a knowledge base article:

I am now closing this thread. If further assistance is needed for this or another case, do not hesitate to contact our team.

Greetings,
Anton Mironov
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
General Discussions
Asked by
Mark
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Mark
Top achievements
Rank 1
Share this question
or