Search code examples
angularhtmlcsslayoutnebular

How to split column layouts to specified space and to make a unscrollable container using angular nebular

I am using nebular theme with a fixed header and trying split columns with specified width and height. But none seems to be working right as the column layouts are not being affected by my width and height properties in local component scss.

<nb-layout>
   <nb-layout-column>First</nb-layout-column>
   <nb-layout-column>Second</nb-layout-column>
</nb-layout>

Since I have a fixed header, the body container is again starting from the top:0 position and hence making the body container to scroll. So here I want to make my body container not to scroll without using overflow:hidden to it.

I have created a stackblitz link: https://stackblitz.com/edit/github-gv8sej

  1. Please check and help me to make the first column width to occupy 70% and second to 30% in total 100% of <nb-layout> container.
  2. How to make my home component not to be scrollable while having a fixed header.
Solution

  • Nebular layout uses Flex, therefore, use flex property instead of width.

    nb-layout{
  width:100%;
  height:100%;
}
nb-layout-column:first-child {
  flex: 2 !important;
  background: #e3e6f9;
}
nb-layout-column:last-child {
  flex: 1 !important;
  background: #f4f4f7;
}

    And the scroll is caused by the following line:

    .nb-theme-default nb-layout .layout {
   min-height: 100vh;
}