ngx-admin icon indicating copy to clipboard operation
ngx-admin copied to clipboard

Published 20 hours ago • verified publisher icon akveo

Tabs Problem

Open salehasadi opened this issue 5 years ago • 4 comments
trafficstars

Issue type

I'm submitting a ...

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

Issue description

Current behavior: When we have lots of tabs in nb-tabset they will go out of container bounds image

Expected behavior: When we have lots of tabs I think user should see a scrollbar to scroll and see rest of tab handles, or maybe another way is to show a continue indicator at end and enable a dragger so user can drag and see rest of tab handles or at least extra items be listed under others.

Steps to reproduce:

Related code:

Simply can be reproduced by adding extra tabs to charts-panel component view of starter kit

<nb-card size="large">
  <nb-tabset fullWidth (changeTab)="changeTab($event)">
    <nb-tab tabTitle="Orders">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-orders-chart #ordersChart [ordersChartData]="ordersChartData"></ngx-orders-chart>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Profit" [lazyLoad]="true">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Profit" [lazyLoad]="true">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Profit" [lazyLoad]="true">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Profit" [lazyLoad]="true">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Profit" [lazyLoad]="true">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Profit" [lazyLoad]="true">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Profit" [lazyLoad]="true">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Profit" [lazyLoad]="true">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Profit" [lazyLoad]="true">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Profit" [lazyLoad]="true">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Profit" [lazyLoad]="true">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Profit" [lazyLoad]="true">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Profit" [lazyLoad]="true">
      <div class="chart-container">
        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
        <ngx-chart-panel-header [type]="period"
                                (periodChange)="setPeriodAndGetChartData($event)">
        </ngx-chart-panel-header>
        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
      </div>
    </nb-tab>
  </nb-tabset>
</nb-card>

Other information:

npm, node, OS, Browser

<!--
Node, npm: `v13.12.0` and `6.14.5`
OS: Linux (incl. deepin).
Browser: Chrome
-->

Angular, Nebular

"@angular/core": "^9.0.4",
 "@nebular/theme": "5.0.0",

salehasadi avatar Jul 17 '20 20:07 salehasadi

Add scroll to tabset could help

nb-tabset > ul { overflow-x: auto; overflow-y: hidden; }

steven274 avatar Jul 23 '20 06:07 steven274

Add scroll to tabset could help

nb-tabset > ul { overflow-x: auto; overflow-y: hidden; }

thanks, but does not work properly. first tab goes out of bounds image

salehasadi avatar Jul 23 '20 20:07 salehasadi

@salehasadi did you customize your tabs? If so, could you share it? The way to go is:

  1. Adding Scroll with overflow hidden
  2. with scroll steps of size tab easier with scroll-snap official doc
  3. Width should be a multiple of ( steps+border+space between tabs)

And that's it If you don't, please say so. I will implement it because I need it and then share it here, but if you did it, I will not.

And example with delta With scroll-snap-type 👆tutorial

titusfx avatar Aug 20 '21 11:08 titusfx

@salehasadi did you customize your tabs? If so, could you share it? The way to go is:

1. Adding Scroll with overflow hidden

2. [with scroll steps of size tab](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft) easier with [scroll-snap official doc](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type)

3. Width should be a multiple of ( steps+border+space between tabs)

And that's it If you don't, please say so. I will implement it because I need it and then share it here, but if you did it, I will not.

And example with delta With scroll-snap-type point_up_2tutorial

Hi, as this is about more than 1 years ago. I don't remember how I solved that and I can't check it as backend is turned down. so if you have any solution about this please share it here so if others or me either again got in trouble about that we can use it and say thanks again to you.

salehasadi avatar Aug 21 '21 11:08 salehasadi