diff --git a/src/app/components/tabmenu/tabmenu.css b/src/app/components/tabmenu/tabmenu.css index 67758af675f..92e11c65c9c 100755 --- a/src/app/components/tabmenu/tabmenu.css +++ b/src/app/components/tabmenu/tabmenu.css @@ -1,5 +1,39 @@ -.p-tabmenu { +.p-tabmenu-nav-container { + position: relative; +} + +.p-tabmenu-scrollable .p-tabmenu-nav-container { + overflow: hidden; +} + +.p-tabmenu-nav-content { overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; +} + +.p-tabmenu-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.p-tabmenu-nav-prev { + left: 0; +} + +.p-tabmenu-nav-next { + right: 0; +} + +.p-tabview-nav-content::-webkit-scrollbar { + display: none; } .p-tabmenu-nav { @@ -27,6 +61,7 @@ .p-tabmenu-nav .p-menuitem-text { line-height: 1; + white-space: nowrap; } .p-tabmenu-ink-bar { @@ -34,6 +69,6 @@ z-index: 1; } -.p-tabmenu::-webkit-scrollbar { +.p-tabmenu-nav-content::-webkit-scrollbar { display: none; } diff --git a/src/app/components/tabmenu/tabmenu.ts b/src/app/components/tabmenu/tabmenu.ts index 0e7f0817d76..40159f96090 100755 --- a/src/app/components/tabmenu/tabmenu.ts +++ b/src/app/components/tabmenu/tabmenu.ts @@ -10,33 +10,43 @@ import {TooltipModule} from 'primeng/tooltip'; @Component({ selector: 'p-tabMenu', template: ` -
By default item that matches the active route is highlighted, alternatively activeItem property can be used choose the initial active item.