Drawer Position Issue
I am having a few issues with my Notification Drawer component.
I am using another drawer like this one but it is showing correctly and I have looked at the settings to make sure they are correct and they seem to be. Do I have to change anything to make this work?
Picture
Replies (5)
Hi,
Sorry for the late reply.
If you are using multiple drawers please make each drawer has unique name data-kt-drawer-name="aside" set in HTML.
Regards
Does the name have to be in the drawer toggle name and button name as well? Or are you saying it should be 'aside'.
aside is the name of the drawer. Each drawer should have a unique name. The toggle button is linked via its ID.This is what my code looks like for two drawers I am trying to create:
<div class="btn btn-icon btn-active-light-primary w-30px h-30px w-md-40px h-md-40px" >
<i class="fal fa-analytics"></i>
</div>
<div class="bg-white" data-kt-drawer="true" data-kt-drawer-name="aside" data-kt-drawer-activate="true" data-kt-drawer-toggle="#summary_drawer_button" data-kt-drawer-overlay="true" data-kt-drawer-close="#summary_drawer_close" data-kt-drawer-width="1400px"></div>_______________________________
<div class="btn btn-icon btn-active-light-primary position-relative" >
<i class="fal fa-bell"></i>
<span class="bullet bullet-dot bg-success h-6px w-6px position-absolute translate-middle top-0 start-50 animation-blink"></span>
</div>
<div class="bg-body" data-kt-drawer="true" data-kt-drawer-name="aside" data-kt-drawer-activate="true" data-kt-drawer-toggle="#alert_drawer_button" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:"300px", "md": "500px"}" data-kt-drawer-close="#alert_drawer_close"></div>This is the code I am using to create the drawer. The summary drawer works but the notifications drawer comes out with the opacity background for some reason. will these not work if I am using php includes on the pages to make the code base cleaner.
Hi,
I see that you are using the same data-kt-drawer-name="aside" parameter for both drawers. Please try to use another name value for your 2nd drawer: data-kt-drawer-name="aside-2"
Regards
