Sidebar not allowing overlap

[nqaba nleya]

Good day,

I am having trouble with styling a small element to overlap the sidebar.

 

CSS Styles:

1. .options{
2. position: absolute;
3. inset: 0px 0px auto auto;
4. margin: 0px;
5. transform: translate3d(-4.8px, 180.8px, 0px);

}

[LeoLavanya Dhanaraj]

Hi nqaba,

Greetings from Syncfusion support.

Based on the provided output screenshot, we understand that you want to render an element that is overlapped by the Sidebar and positioned at its center. We have included a sample of the Sidebar with the button rendered at the center edge of the Sidebar. By default, the z-index value for the Sidebar is set to 1000 to allow it to overlap other elements. To meet your needs, we suggest setting the new element z-index to a higher stack order than the Sidebar element.

Please refer to the customized code snippets, output screenshots, and sample below for further assistance.

Sample : https://stackblitz.com/edit/angular-ibq9a3hj-2pknac6o?file=src%2Fapp.component.html

<div class="control-section" id="sidebar-wrapper">

  <div>

  <button ejs-button class="menuButton">Child</button>

  <div class="wrapper">

    <ejs-sidebar

      id="defaultSidebar"

      #sidebar

      class="default-sidebar"

      width="260px"

      target=".maincontent"

      position="Left"

    >

      <ejs-treeview

        id="defaultTree"

        [fields]="treeFields"

        (nodeSelecting)="beforeSelect($event)"

        (nodeSelected)="onSelect($event)"

      >

      </ejs-treeview>

    </ejs-sidebar>

  </div>

</div>

 

<style>

  .wrapper {

      position: relative;

  }

  .menuButton {

      left: 245px;

      position: absolute;

      top: 292px;

      z-index: 10001;

  }

</style

Output screenshots:

Note : You can modify the CSS left value of the button element based on the events of the Sidebar expanding and collapsing.

Regards,

Leo Lavanya Dhanaraj

[nqaba nleya]

Hi Leo,

Please see the below image indicating where the button should be.

In the solution you provided the button seems to be outside the sidebar but i need it inside the sidebar component

Please let me know if you need further clarification. 

Kind Regards,

Nqaba 

[LeoLavanya Dhanaraj]

Hi Nqaba,

As per your last update, you would like the button element to be rendered inside the Sidebar component, centered at the edge of the sidebar. To meet your needs, we have modified the shared sample and included it for your reference. Please check the customization style codes, and output screenshots provided below.

Sample : Cnjqd8bb (forked) - StackBlitz

<ejs-sidebar

  id="defaultSidebar"

  #sidebar

  class="default-sidebar"

  width="260px"

  target=".maincontent"

  position="Left"

> 

  <ejs-treeview

    id="defaultTree"

    [fields]="treeFields"

    (nodeSelecting)="beforeSelect($event)"

    (nodeSelected)="onSelect($event)"

  >

  </ejs-treeview>

  <br />

  <button ejs-button class="menuButton">Child</button>

</ejs-sidebar>

 

<style>

  .wrapper {

    position: relative;

  }

  .default-sidebar {

    overflow: unset;

  }

  .menuButton {

    position: absolute;

    left: 230px;

    top: 50%;

    width: 60px;

  }

</style

Output screenshots: