Where to place nb-sidebar-header within nb-layout in v4

[pdomala]

Issue type

I'm submitting a ... (check one with "x")

• [X] bug report
• [ ] feature request

Issue description

Current behavior: Below code displays the sidebar within the scroll container. It leaves empty space equal to the height of the main header

Expected behavior: But as per the documentation, it should be displayed on top of the scroll container.

Steps to reproduce: Run the app with above layout code.

Related code:

<nb-layout>
  <nb-layout-header subheader>
    <app-header class="w-100"></app-header>
  </nb-layout-header>

  <nb-sidebar>
    <nb-sidebar-header>
      <span>My Sidebar Header</span>
    </nb-sidebar-header>
    <app-sidebar></app-sidebar>
  </nb-sidebar>

  <nb-layout-column>
    <router-outlet></router-outlet>
  </nb-layout-column>
</nb-layout>

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

Angular, Nebular

"dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/cdk": "^8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@nebular/bootstrap": "^4.1.0",
    "@nebular/eva-icons": "4.1.0",
    "@nebular/theme": "^4.1.0",
    "rxjs": "~6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  }

[json-alzate]

HI, I found a solutions for me, is out nb-sidebar from nb-loyout and then apply a css class: html:

  <nb-sidebar-header>
    <nb-user size="large" name="Jonh Doe" title="Engineer" picture="https://via.placeholder.com/50/4479e7/ffffff?Text=IMG"
    onlyPicture>
  </nb-user>
  </nb-sidebar-header>
<!--my menu with scroll bar-->
  <app-menu></app-menu>

  <nb-sidebar-footer>
    close
  </nb-sidebar-footer>

</nb-sidebar>


<nb-layout>
  <nb-layout-column class="column-container">

    <router-outlet></router-outlet>

  </nb-layout-column>

</nb-layout>

and the css:

nb-user {
  position: absolute;
  left: 0;
}

nb-sidebar-header {
  min-height: 5rem;
}

.column-container {
  padding-left: 5rem !important;
}

Sorry if my code is dirty

[brneor]

I can add that this behavior can't be overriden even in the global scss file. It's a bit annoying.

[gvonhagel]

9 months later and this component is still broken

[fredericojesus]

Add [containerFixed]="false" to

<nb-sidebar [containerFixed]="false">

[savy-91]

Add [containerFixed]="false" to

<nb-sidebar [containerFixed]="false">

Doing so makes the sidebar content scroll with the page

[savy-91]

Here is what worked for me (I am not using a header and everything is in the sidebar): Add this in styles.scss: .main-container { top: 0px !important; }

[malachibazar]

Hello, is there any progress on this?

[shifubrams]

Hi, any news on that ?