nb-accordion not working inside nb-tab

tanzeelrana commented 5 years ago

Issue type

I'm submitting a bug

[x] bug report

Issue description

Current behavior:

when I add nb-accordion inside a nb-tab which is inside a nb-tabset. nb-accordion does not work the way I expect. It is initialized with an open state and when I close it, it does collapse. But when I try expanding it, it does not expand at all.

But when I use nb-accordion outside nb-tabset it works fine.

Related code:

html

<nb-card class="preview-card">
  <nb-card-body>
    <div class="preview-card-header">
        <span class="preview-card-title"></span>
        <button nbButton status="info" class="alert-info">Print</button>
    </div>
    <nb-tabset>
      <nb-tab tabTitle="Breakdown">
        <br>
        <img src="assets/images/specialist.png">
        <nb-card>
          <nb-card-header><h4>TRUST</h4></nb-card-header>
          <nb-card-body>
            <p>OOO LTD .</p>
          </nb-card-body>
          <nb-card-footer>
            <p>Your best business decision.</p>
          </nb-card-footer>
        </nb-card>

        <nb-card>
          <nb-card-header><h4>SUMMARY OF WORK</h4></nb-card-header>
          <nb-card-body>

            <nb-accordion>
              <nb-accordion-item>
                <nb-accordion-item-header>Product Details</nb-accordion-item-header>
                <nb-accordion-item-body>
                  Item Content
                </nb-accordion-item-body>
              </nb-accordion-item>
            </nb-accordion>

          </nb-card-body>
        </nb-card>

      </nb-tab>

      <!-- Scope Tab -->
      <nb-tab tabTitle="Scopes">
        <br>
        <img src="assets/images/specialist.png">
      </nb-tab>
    </nb-tabset>
  </nb-card-body>
</nb-card>

scss

@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@import '~bootstrap/scss/mixins/breakpoints';

@include nb-install-component() {

  .preview-card {
    width: 100%;
    height: nb-theme(card-height-xlarge);
    background-color: rgb(248, 248, 248);
  }

  .job-detail-card {
    background: lightgray;
    font-weight: nb-theme(font-weight-bold);
  }

  .preview-card-header {
    display: flex;

    .preview-card-title {
      flex: 1;
    }
  }
}

ts

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'ngx-preview',
  templateUrl: './preview.component.html',
  styleUrls: ['./preview.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PreviewComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
    // private router: Router,
  ) {
    this.route.parent.params.subscribe( params => {
      // console.log(params);
    });
  }

  ngOnInit() {
  }

}

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?
-->

node --version
v11.4.0

npm --version
6.4.1

macOS High Sierra

Chrome

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->

"dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "^6.0.0",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/forms": "6.0.0",
    "@angular/http": "6.0.0",
    "@angular/material": "^7.1.0",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/router": "6.0.0",
    "@asymmetrik/ngx-leaflet": "3.0.1",
    "@nebular/auth": "2.0.1",
    "@nebular/bootstrap": "2.0.1",
    "@nebular/security": "2.0.1",
    "@nebular/theme": "2.0.1",
    "@ng-bootstrap/ng-bootstrap": "1.0.0",
    "@swimlane/ngx-charts": "7.0.1",
    "angular-tree-component": "7.2.0",
    "angular2-chartjs": "0.4.1",
    "angular2-toaster": "6.0.0",
    "bootstrap": "4.0.0",
    "chart.js": "2.7.1",
    "ckeditor": "4.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.1",
    "echarts": "^4.0.2",
    "googlemaps": "^1.12.0",
    "intl": "1.2.5",
    "ionicons": "2.0.1",
    "leaflet": "1.2.0",
    "nebular-icons": "1.0.9",
    "ng2-ckeditor": "1.1.13",
    "ng2-completer": "2.0.8",
    "ng2-smart-table": "1.3.5",
    "ngx-echarts": "2.0.1",
    "normalize.css": "6.0.0",
    "pace-js": "1.0.2",
    "parse": "^2.1.0",
    "roboto-fontface": "0.8.0",
    "rxjs": "^6.1.0",
    "rxjs-compat": "^6.1.0",
    "socicon": "3.0.5",
    "tinymce": "4.5.7",
    "typeface-exo": "0.0.22",
    "web-animations-js": "2.2.5",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.0.0",
    "@angular/compiler-cli": "6.0.0",
    "@angular/language-service": "6.0.0",
    "@compodoc/compodoc": "1.0.1",
    "@fortawesome/fontawesome-free": "^5.2.0",
    "@types/d3-color": "1.0.5",
    "@types/googlemaps": "3.30.4",
    "@types/jasmine": "2.5.54",
    "@types/jasminewd2": "2.0.3",
    "@types/leaflet": "1.2.3",
    "@types/node": "6.0.90",
    "codelyzer": "4.0.2",
    "conventional-changelog-cli": "1.3.4",
    "husky": "0.13.3",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "4.1.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "npm-run-all": "4.0.2",
    "protractor": "5.1.2",
    "rimraf": "2.6.1",
    "stylelint": "7.13.0",
    "ts-node": "3.2.2",
    "tslint": "5.7.0",
    "tslint-language-service": "0.9.6",
    "typescript": "2.7.2",
    "@angular-devkit/build-angular": "~0.6.0"
  }

Tibing commented 5 years ago

Hi @tanzeelrana, I've tried to reproduce the issue with your code in the stackblitz and it works completely fine. Could you please provide us the code which will reproduce the issue?

nnixaa commented 5 years ago

Closing as it seems outdated. Please open a new issue if you still experience this behavior.

akveo / nebular