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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(