Nebular: NBWindowService limit size

Created on 24 Mar 2019  路  3Comments  路  Source: akveo/nebular

Issue type

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

  • [x] bug report
  • [ ] feature request

Issue description

Current behavior:

Expected behavior:

Steps to reproduce:

Related code:

insert short code snippets here

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

Angular, Nebular

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

Most helpful comment

Hi @obarazan. You can limit the height of the component passed to the window. For example:

@Component({
  selector: 'window-content',
  template: `...`,
  styles: [`
    :host {
      max-height: 90vh; <------- setting component max height
    }
  `]
})
export WindowContentComponent {}

Otherwise you can specify windowClass option when opening window: this.windowService.open(template, { windowClass: 'window-limited-height' })
and set max height for elements with this class:

.window-limited-height {
  max-height: 90vh;
}

Please notice this class should be put into global styles, not in component styles if you have view encapsulation enabled.

All 3 comments

Hi,

I'm using in NBWindowService from onSystemRowSelect in smart tale. the open window is out of frame.
I see only the middle of window and the scroll bar isn't working.
Is it possible to limit the size of window?
style.ts
styles: [
nb-card {
transform: translate3d(0, 0, 0);
}
button {
background: transparent;
border: none;
padding: 0;
}
.infinite-cards {
nb-card {
&.own-scroll {
height: 50vh;
}
}
],
html
<ng2-smart-table [(settings)]="settings" [source]="source" (userRowSelect)="onSystemRowSelect($event)"> <div class="infinite-cards row"> <nb-card class="own-scroll"> <ng-template #contentTemplate let-data>

image

Hi @obarazan. You can limit the height of the component passed to the window. For example:

@Component({
  selector: 'window-content',
  template: `...`,
  styles: [`
    :host {
      max-height: 90vh; <------- setting component max height
    }
  `]
})
export WindowContentComponent {}

Otherwise you can specify windowClass option when opening window: this.windowService.open(template, { windowClass: 'window-limited-height' })
and set max height for elements with this class:

.window-limited-height {
  max-height: 90vh;
}

Please notice this class should be put into global styles, not in component styles if you have view encapsulation enabled.

Closing as answered

Was this page helpful?
0 / 5 - 0 ratings