Toggle button at the bottom of a kendo-drawer

3 Answers 112 Views
Drawer
Kristof
Top achievements
Rank 1
Iron
Iron
Kristof asked on 30 Apr 2021, 08:34 PM

I want to achieve a menu like the Azure DevOps menu with the Drawer control (see attachment)

How can I put the toggle button at the bottom within the Drawer control? The drawer control is a fixed menu at the left side with height 100%.<

Can i do this with the footer template?

3 Answers, 1 is accepted

Sort by
1
Accepted
Dimiter Madjarov
Telerik team
answered on 07 May 2021, 10:20 AM

Hi Kristof,

I updated the example with the listed requirement of displaying the AppBar above the Drawer, in a combination with the collapse button in the footer template. Additionally I added the two-way bound expanded property in order to change the visibility of the collapse button conditionally.

Here is the updated stackblitz - https://stackblitz.com/edit/angular-rb6erj-jmwmsz

Regards,
Dimiter Madjarov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Dimiter Madjarov
Telerik team
answered on 03 May 2021, 06:15 AM

Hello Kristof,

Yes, this could be achieved. Please check my answer in the other thread on the same topic:

https://www.telerik.com/forums/toggle-button-at-the-bottom-of-a-kendo-drawer

Regards,
Dimiter Madjarov
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/.

Kristof
Top achievements
Rank 1
Iron
Iron
commented on 03 May 2021, 06:25 PM

Hi Dimiter,

Thanks for your help.
My page contains of an kendo appbar, followed by the drawer container with drawer and content. (classic template: header, menu and content)

The drawer fills the whole page (height 100% - width 240) at the left side.
I already found the footer template, but the button "collapse" is just after the last drawer item. (also in the docs). I would like to have the button "collapse" at the bottom of the page (because my drawer has height 100%)

Little bit like in this example: https://www.telerik.com/forums/attachments/1024418

How can I achieve this one?
0
Dimiter Madjarov
Telerik team
answered on 04 May 2021, 07:35 AM

Hello Kristof,

Yes, the footer template could be used to achieve the desired behaviour with the addition of some custom CSS styles in order to position the button at the very bottom of the Drawer component. Here is an example of this in acton:

https://stackblitz.com/edit/angular-snmgpg-yeskxk?file=app/app.component.ts

Regards,
Dimiter Madjarov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Kristof
Top achievements
Rank 1
Iron
Iron
commented on 04 May 2021, 07:08 PM

Hi Dimiter,

Great support! Your example works (without the appbar), but I also have an Kendo ui AppBar above the drawer as mentioned. It seems that the button is not shown on the screen (he is outside the screen and not visible) -> It seems the height is not respected?

How to combine appbar + drawer with the footer template in this example:
https://stackblitz.com/edit/angular-snmgpg-yeskxk?file=app/app.component.ts

thx!
Dimiter Madjarov
Telerik team
commented on 05 May 2021, 11:20 AM

Hi Kristof,

I am not exactly sure what is the issue related to the AppBar. If there is an AppBar or toolbar on the same page as the Drawer, and the Drawer is initialised in "push mode", the general recommendation is for the AppBar to be outside the drawer container. This way the Drawer will expand below the AppBar. Similar scenario is demonstrated in the following example:

https://www.telerik.com/kendo-angular-ui/components/layout/drawer/#toc-basic-usage

 

Kristof
Top achievements
Rank 1
Iron
Iron
commented on 05 May 2021, 12:24 PM

Hi Dimiter,

The appbar is outside the drawer. Just two components <kendo-appbar></kendo-appbar><kendo-drawer-container>...</kendo-drawer-container>. My Appbar is sticky (at this moment) and drawer is in push mode.
Kendo-AppBar is set in css to 70px. The drawer container and drawer have width+height = 100%/position=fixed. Html/Body elements have padding/margin 0 and height 100%.

I started from the example in this forum post https://www.telerik.com/forums/drawer-is-overlapping-appbar:
-> https://stackblitz.com/edit/angular-rb6erj

I tried to add the footer template as mentioned in your previous comment in this post with the button at the bottom right of the drawer.

Result in stackblitz -> the button is not visible on the screen. If I have have a look in the console (elements), it appears that the button is drawn below the visible screen dimensions. It appears that the combination of the appbar and the drawer exceed the 100%.

Also the scrollbar of the kendo-drawer does not respect the dimensions completely. The last item in the drawer-items is not completely visible when resizing screen. I guess both issues are related. The issue only starts when the AppBar is added. Without the appbar no problem.

Thanks for your help!
Tags
Drawer
Asked by
Kristof
Top achievements
Rank 1
Iron
Iron
Answers by
Dimiter Madjarov
Telerik team
Share this question
or