Responsive behavior for TabView

[sousajunior]

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

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
Today when you are using the TabView component on a mobile screen the tabs stay one over another. I think that behavior harms the design of the page, because can desalign all page.

What is the motivation / use case for changing the behavior?
I had a idea when a saw the google search tabs. They are horizontally scrollable, without desalign the page design.
Its possible to implement the same behavior on TabView when you using on a mobile platforms ?

• Current TabView

• Example of google tabs

[agustinsantiago]

For future readers, I implemented sousajunior's comment like this:

.responsive-tab-view .p-tabview-nav {
  flex-wrap: nowrap;
  overflow-x: auto;

  li {
    flex: 0 0 auto;
  }
}

then when instantiating the tabview:

<p-tabView class="responsive-tab-view">

[acsiseci]

A simple solution method

@media (max-width: 991px){
  ul.p-tabview-nav li{
    width: 100% !important;
  }

  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
    border-color: #efefef !important;
    border-top-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
  }

  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
    background: #efefef !important;
    font-weight: bold;
  }
}

Web

Mobile

[davisb10]

This is being resolved on issue #10119

[mertsincan]

Yes, fixed in #10119

Best Regards,