Ngx-admin: Grid class system is not working for Nebular Theme v4.0.0

Created on 10 Jun 2019 · 11Comments · Source: akveo/ngx-admin

Issue type

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

[x] bug report
[ ] feature request
[ ] question about the decisions made in the repository

Issue description

Current behavior:
I have placed the .row and .show-grid class on two cards in my content layout. However, the

Expected behavior:
I expect for the two cards to be laid side-by-side on screens size tablet and larger. And only stack when the screen goes smaller (<768px).

Steps to reproduce:
You can see the problem in the StackBlitz sample shown below. The BaristaMachineComponent template has a container with the Grid classes but nothing is happening.

<div class="row show-grid">
  <div class="col-md-6">
    <nb-card [size]="'medium'">
      <nb-card-header>Drinks Menu</nb-card-header>
      <nb-card-body>
        <div *ngFor="let drink of menuDrinks">
          <button nbButton
                  (click)="handleMakeDrink(drink.name)"
                  [disabled]="!drink.inStock">{{drink.name}}, {{drink.cost}}</button>
        </div>
      </nb-card-body>
    </nb-card>
  </div>
  <div class="col-md-6">
    <nb-card [size]="'medium'">
      <nb-card-header>Inventory</nb-card-header>
      <nb-list>
        <nb-list-item *ngFor="let item of inventory">
          {{item.ingredient}} - {{item.quantity}}
        </nb-list-item>
      </nb-list>
    </nb-card>
    <button nbButton status="warning" (click)="handleRestockInventory()">Restock inventory</button>
  </div>
</div>

Other information:

npm, node, OS, Browser

<!--
Node, npm: v10.13.0 and 6.9.0
OS: Windows 10. 
Browser: Firefox Quantum 67.0.1 (64-bit), Chrome 74.0.3729.169 (Official Build) (64-bit)
-->

Angular, Nebular

    "@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/eva-icons": "4.0.0",
    "@nebular/theme": "^4.0.0",
    "eva-icons": "^1.1.1",

Source

guillermoarellano

Most helpful comment

Resolved:

The solution was to import both @nebular/bootstrap and regular bootstrap into the project. And then modify the src/styles.scss pull in the Bootstrap mixins and grids.

npm install bootstrap @nebular/bootstrap
Modify styles.scss
- See this file -- https://stackblitz.com/github/guillermoarellano/ngx-baristamatic-demo/tree/08b58bd347680fa07ec52d6cfc0c321f0ae4b9aa?file=src%2Fstyles.scss

Thanks to @LeonardHorng for the tip. 👍

guillermoarellano on 12 Jun 2019

👍6 ❤2 🚀1

All 11 comments

can you update angular8??

YukiDmZhao on 10 Jun 2019

Hi Yuki,

I have the latest version of Angular 8 already. Can you see my StackBlitz code base? Have you seen this issue before? I have never had problems when using the Bootstrap CSS library and it's Grid classes. Wondering if I configured the app correctly when I installed it. I used the Angular CLI ng add command install Nebular theme.

Guillermo

guillermoarellano on 10 Jun 2019

Thanks for your relpy,Because I try to use branch (feat updatet-to 8) The style is very strange，
I want to update old project, not create new project ,

YukiDmZhao on 11 Jun 2019

add @nebular/[email protected]

LeonardHorng on 11 Jun 2019

git clone ngx-admin
then
1: add @nebular/[email protected]
2:add @nebular/theme
3: others ,so ??

YukiDmZhao on 11 Jun 2019

add @nebular/[email protected]
add @nebular/theme
add @nebular/[email protected]
if using auth and security, you can add @nebular/security and @nebular/auth.
Ensure that you using Node 12 or latest.

LeonardHorng on 11 Jun 2019

Resolved:

The solution was to import both @nebular/bootstrap and regular bootstrap into the project. And then modify the src/styles.scss pull in the Bootstrap mixins and grids.