2

I would like to have the footer full screen width, rather than the width of the contents section (screen width - sidebar width). Is there any way to do this?

I am using Nebular to build my app.

I couldn't find any option in Nebular docs to do this. So I tried extending the nbLayoutComponent, named it customNgLayoutComponent, and customized it to my desired template layout and used it wherever nb-layout is used. I am not sure this is the right way of customizing a component from a library.

I basically copied the original template of the nbLayoutComponent from the source https://github.com/akveo/nebular/blob/master/src/framework/theme/components/layout/layout.component.ts and tweaked it a little (placed <ng-content select="nb-layout-footer"></ng-content> in layout div instead of content div).

I am expecting the component template to be overridden with my custom template. But it does not work. Is this how you override the template of a component from a library? Do I have to also copy all the functions in nbLayoutComponent to make my customNbLayout work?

Maihan Nijat
  • 9,054
  • 11
  • 62
  • 110
bumchickbum97
  • 101
  • 2
  • 6
  • have you found a solution ? nebular does not provide solution out of the box for this even though to me it's like a basic needed functional. You can do styles for nb-layout-footer making it display: abs, left: 0 -> right: 0 and bottom: 0 with z-index, but i dont like this solution – Anton Aug 22 '21 at 13:33

1 Answers1

1

You can do this without extending NbLayoutComponent.

Take out the footer component and place it under nb-layout:

<nb-layout-footer>
  ... footer component
</nb-layout-footer>

And adjust the size of sidebar or .main-container under sidebar and make the footer width 100%.

nb-sidebar .main-container {
   height: calc(100vh - height-of-your-footer)
}

nb-layout-footer {
   width: 100%
}

What's happening: You might have the following layout:

<nb-layout>
  <nb-layout-header subheader>
    <app-header></app-header>
  </nb-layout-header>
  <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
    <nb-menu tag="menu" [items]="items"></nb-menu>
  </nb-sidebar>
  <nb-layout-column class="layout-container">
    <ng-content></ng-content>
  </nb-layout-column>
  <nb-layout-footer>
    <app-footer></app-footer>
  </nb-layout-footer>
</nb-layout>

By placing the nb-layout-footer under the nb-layout, both sidebar and .content container are placed under .layout-container and each has defined width. The footer falls under .content. In order to make it full width you need to take the footer out of .layout-container.

Maihan Nijat
  • 9,054
  • 11
  • 62
  • 110
  • Hi, Thanks for the answer but this isn't working. No matter where you place nb-layout-footer, its always going to be rendered inside .contents. This is because in the layoutComponent they are using ng-content to choose the footer tag and place it in the content (check [this](https://github.com/akveo/nebular/blob/d9a0ef79f136a3ed315a40cfcd04c4603d68598a/src/framework/theme/components/layout/layout.component.ts#L141) line in the library). Any other ideas will be highly appreciated because I am loosing my mind over this. – bumchickbum97 Sep 24 '19 at 10:26
  • 1
    @bumchickbum97 The easiest way would be not using the `nb-layout-footer`. Use a simple container to hold your contents. – Maihan Nijat Sep 24 '19 at 12:22