Search code examples
angularnebular

Nebular page causing padding

So I followed theenter image description here article on creating a page: https://akveo.github.io/nebular/docs/guides/create-nebular-page#related-articles

When I do that I seem to get padding all over (seems like its nb-layout-column) so it looks weird and doesn’t look like the image shown on the page. Do you know why its doing this? I attached a screenshot of it.

Here is my code:

home.component.html

<nb-layout>
    <nb-layout-header fixed>Company Name</nb-layout-header>

    <nb-sidebar>Sidebar Content</nb-sidebar>

    <nb-layout-column>
      Page Content <button nbButton>Hello World</button>
    </nb-layout-column>
    <nb-layout-column>First</nb-layout-column>
    <nb-layout-column>Second</nb-layout-column>
  </nb-layout>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule, NbSidebarModule, NbButtonModule, NbMenuModule, NbSidebarService } from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'default' }),
    NbLayoutModule,
    NbEvaIconsModule,
    NbSidebarModule,
    NbButtonModule,
    NbMenuModule.forRoot()
  ],
  providers: [NbSidebarService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<nb-layout>

  <nb-layout-header fixed>
  <!-- Insert header here -->
  </nb-layout-header>

  <nb-layout-column>

    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
    <!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
    <!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
    <!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
    <!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
    <!-- * * * * * * * to get started with your project! * * * * * * * * -->
    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

    <style>
      :host {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 14px;
        color: #333;
        box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        margin: 8px 0;
      }

      p {
        margin: 0;
      }

      .spacer {
        flex: 1;
      }

      .toolbar {
        height: 60px;
        margin: -8px;
        display: flex;
        align-items: center;
        background-color: #1976d2;
        color: white;
        font-weight: 600;
      }

      .toolbar img {
        margin: 0 16px;
      }

      .toolbar #twitter-logo {
        height: 40px;
        margin: 0 16px;
      }

      .toolbar #twitter-logo:hover {
        opacity: 0.8;
      }

      .content {
        display: flex;
        margin: 32px auto;
        padding: 0 16px;
        max-width: 960px;
        flex-direction: column;
        align-items: center;
      }

      svg.material-icons {
        height: 24px;
        width: auto;
      }

      svg.material-icons:not(:last-child) {
        margin-right: 8px;
      }

      .card svg.material-icons path {
        fill: #888;
      }

      .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 16px;
      }

      .card {
        border-radius: 4px;
        border: 1px solid #eee;
        background-color: #fafafa;
        height: 40px;
        width: 200px;
        margin: 0 8px 16px;
        padding: 16px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        transition: all 0.2s ease-in-out;
        line-height: 24px;
      }

      .card-container .card:not(:last-child) {
        margin-right: 0;
      }

      .card.card-small {
        height: 16px;
        width: 168px;
      }

      .card-container .card:not(.highlight-card) {
        cursor: pointer;
      }

      .card-container .card:not(.highlight-card):hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 17px rgba(black, 0.35);
      }

      .card-container .card:not(.highlight-card):hover .material-icons path {
        fill: rgb(105, 103, 103);
      }

      .card.highlight-card {
        background-color: #1976d2;
        color: white;
        font-weight: 600;
        border: none;
        width: auto;
        min-width: 30%;
        position: relative;
      }

      .card.card.highlight-card span {
        margin-left: 60px;
      }

      svg#rocket {
        width: 80px;
        position: absolute;
        left: -10px;
        top: -24px;
      }

      svg#rocket-smoke {
        height: 100vh;
        position: absolute;
        top: 10px;
        right: 180px;
        z-index: -10;
      }

      a,
      a:visited,
      a:hover {
        color: #1976d2;
        text-decoration: none;
      }

      a:hover {
        color: #125699;
      }

      .terminal {
        position: relative;
        width: 80%;
        max-width: 600px;
        border-radius: 6px;
        padding-top: 45px;
        margin-top: 8px;
        overflow: hidden;
        background-color: rgb(15, 15, 16);
      }

      .terminal::before {
        content: "\2022 \2022 \2022";
        position: absolute;
        top: 0;
        left: 0;
        height: 4px;
        background: rgb(58, 58, 58);
        color: #c2c3c4;
        width: 100%;
        font-size: 2rem;
        line-height: 0;
        padding: 14px 0;
        text-indent: 4px;
      }

      .terminal pre {
        font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
        color: white;
        padding: 0 1rem 1rem;
        margin: 0;
      }

      .circle-link {
        height: 40px;
        width: 40px;
        border-radius: 40px;
        margin: 8px;
        background-color: white;
        border: 1px solid #eeeeee;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        transition: 1s ease-out;
      }

      .circle-link:hover {
        transform: translateY(-0.25rem);
        box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
      }

      footer {
        margin-top: 8px;
        display: flex;
        align-items: center;
        line-height: 20px;
      }

      footer a {
        display: flex;
        align-items: center;
      }

      .github-star-badge {
        color: #24292e;
        display: flex;
        align-items: center;
        font-size: 12px;
        padding: 3px 10px;
        border: 1px solid rgba(27,31,35,.2);
        border-radius: 3px;
        background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
        margin-left: 4px;
        font-weight: 600;
        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
      }

      .github-star-badge:hover {
        background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
        border-color: rgba(27,31,35,.35);
        background-position: -.5em;
      }

      .github-star-badge .material-icons {
        height: 16px;
        width: 16px;
        margin-right: 4px;
      }

      svg#clouds {
        position: fixed;
        bottom: -160px;
        left: -230px;
        z-index: -10;
        width: 1920px;
      }


      /* Responsive Styles */
      @media screen and (max-width: 767px) {

        .card-container > *:not(.circle-link) ,
        .terminal {
          width: 100%;
        }

        .card:not(.highlight-card) {
          height: 16px;
          margin: 8px 0;
        }

        .card.highlight-card span {
          margin-left: 72px;
        }

        svg#rocket-smoke {
          right: 120px;
          transform: rotate(-5deg);
        }
      }

      @media screen and (max-width: 575px) {
        svg#rocket-smoke {
          display: none;
          visibility: hidden;
        }
      }
    </style>


    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
    <!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
    <!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
    <!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
    <!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->



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

  <nb-layout-footer fixed>
  <!-- Insert footer here -->
  </nb-layout-footer>

</nb-layout>
Solution

  • The issue is with your structure. You have the <router-outlet> inside an <nb-layout-column> in your app.component.html which give any component rendered in the <router-outlet> padding. If you open up your dev tools in your browser you'll see the padding on the <nb-layout-column> that is surrounding the <router-outlet>.

    Solution 1:

    You can have just a router outlet inside your app.component.html. This will give you a unique <nb-layout-header> and <nb-sidebar> for each component rendered in the <router-outlet>.

    app.component.html

    <router-outlet></router-outlet>

    home.component.html

    <nb-layout>
  <nb-layout-header fixed>Company Name</nb-layout-header>

  <nb-sidebar>Sidebar Content</nb-sidebar>

  <nb-layout-column>
    Page Content <button nbButton>Hello World</button>
  </nb-layout-column>

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

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

    https://stackblitz.com/edit/github-fqgxku

    Solution 2:

    You can have your base layout inside your app.component.html and have all your pages rendered inside the <router-outlet> allowing you to share the same <nb-layout-header> and <nb-sidebar>.

    app.component.html

    <nb-layout>
  <nb-layout-header fixed>Company Name</nb-layout-header>

  <nb-sidebar>Sidebar Content</nb-sidebar>

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

</nb-layout>

    home.component.html

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

    https://stackblitz.com/edit/github-fqgxku-g9fbxb

    There are plenty of other ways to structure it but just giving you two options. Ultimately the issue is how you're rending the home.component.html component inside of a <nb-layout-column> which has padding set on it so any content rendered inside of the column will be padded.

    Hopefully this is somewhat helpful for you.