Toggle button at the bottom of a kendo-drawer

[Kristof]

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?

[Dimiter Madjarov]

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

[Dimiter Madjarov]

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

[Kristof]

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?

[Dimiter Madjarov]

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

[Kristof]

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]

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]

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!