Primeng: Scrollable Tabs Feature

[serak]

I have now gotten into primeng Recently and I am in love with it but one thing that still bug's me is the when you keep adding tabs it wont scroll it just start pilling up vertically.

It would be great if they have the same feature as angular material Tab Scroll

with regards
serak

[cagataycivici]

We have that in PrimeFaces, could do the same for NG as well;

https://www.primefaces.org/showcase/ui/panel/tabView.xhtml

[morganRotaStabelli]

It would be perfect, do you already know when it might come?

[cagataycivici]

In 4.1.1.

[gieboyz]

in 4.1.1
still not working using scrollable="true" like https://www.primefaces.org/showcase/ui/panel/tabView.xhtml

can you give more example for this features?

[serak]

i ask for primeng and i get a response for primeface,,

what just happpend?

On Wed, Sep 6, 2017 at 9:27 AM, Agitahaja Tanjaya [e-mail]
wrote:

in 4.1.1
still not working using scrollable="true" like https://www.primefaces.org/
showcase/ui/panel/tabView.xhtml

can you give more example for this features?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/primefaces/primeng/issues/1701#issuecomment-327387766,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADbQtEk6SKAX7MJF4a5L0m9HZgmcOE8gks5sfjtrgaJpZM4LWwK5
.

[lanbin45]

@gieboyz Did you try scrollable tabview in primeNG of latest version? For V4.2, the property ‘scrollable’ did not work for me.

[luboslav]

You can allow horizontal scrolling with css.

.ui-tabview .ui-tabview-nav {
    white-space: nowrap;
    overflow-x: auto;
}

.ui-tabview .ui-tabview-nav li {
    display: inline-block;
    float: none;
}

[vittal288]

By adding the CSS also it is not working

[vittal288]

any other answer....

[rich4756]

@vittal288 The above css works. Recheck your selectors.

[vittal288]

Could you please share the working example in plunkr or any other site

[RicardoBeltrame]

Try this.

.ui-tabs .ui-tabs-navscroller-btn {
        display: inline !important;
}

[tiagodws]

I think this issue has been forgotten @cagataycivici

[jiangyh1024]

@cagataycivici when does this functionality will be added? Do you have some difficult in implementing this functionality?

[Rishi0405]

.ui-tabview ul.ui-tabview-nav {
        overflow: hidden;
        display: flex;
  }

<button (click)="scrollPrevious($event)"><< </button>
<p-tabView **#tabView** (onChange)="selectTab($event)"></p-tabView>
<button (click)="scrollNext($event)">>> </button>

selectTab(e) {
  e.originalEvent.target.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
}

scrollPrevious(e) {
   this.tabView.el.nativeElement.querySelector('ul.ui-tabview-nav').scrollLeft -= 200;
}

scrollNext(e) {
  this.tabView.el.nativeElement.querySelector('ul.ui-tabview-nav').scrollLeft += 200;
}

[jiangyh1024]

@Rishi0405 Thanks. that's amazing. it works like a charm

[Michel73]

Please put this feature on the roadmap. We would appreciate it very much.
We really need this feature.

[cagataycivici]

Coming soon in 9.1.0.

[OleksandrBohuslavskyi]

So it isn't implemented yet, is it?

[sourdoth]

any update?

[antsteyer]

Need it here !

[OleksandrBohuslavskyi]

Need it here !

I gave up after two days of research and made my own directive. It's pretty simple, just use Element.scrollTo
It seems like the PremeFaces Angular team is not skilled enough to implement this feature. Sad.