Primeng: TabView attribute orientation does not work with PrimeNG 10

[stedel]

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

[x] bug report => Search github for a similar issue or PR before submitting
[ ] 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

Plunkr Case (Bug Reports)
This StackBlitz shows the problem with each non default orientation.

(based on https://stackblitz.com/github/primefaces/primeng-issue-template updated to Angular 10/PrimeNG 10)

Current behavior
The TabView orientation attribute does not change display of TabView headers, instead they always show on top.

Expected behavior
TabView attribute orientation should work as expected as mentioned in the docs instead of just showing the default ´top´ value.

Minimal reproduction of the problem with instructions
See StackBlitz example.

What is the motivation / use case for changing the behavior?
This configuration option is still documented at https://www.primefaces.org/primeng/showcase/#/tabview and should therefore be supported by the Framework as in older versions or should be removed from documentation, if its not planned to be supported in the future.

Please tell us about your environment:
Chrome, Firefox, IE11, Edge

• Angular version: 10.x
  Most recent.

• PrimeNG version: 10.x
  Most recent.

• Browser: [all desktop browsers ]
  Tested in IE11, Firefox, Chrome and Edge Chromium.

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  all, tested with TypeScript 3.9.7

• Node (for AoT issues): node --version =
  12.18.4

[pmo1948]

I second this issue. Looking forward to its being solved!

[pmo1948]

here is a visual of the issue (taken from stedel's stackblitz). all orientations just end up on top

[saramcicchi]

I'm not sure why this is marked as an enhancement. It is a regression as this capability worked in version 9 and below. Would really appreciate this being fixed in version 10.

[JEEVANJGA]

Are there any alternative solutions available to resolve this issue?

[JEEVANJGA]

On checking following code comparison

It is found that the code for the orientation attribute is removed.

if someone could update the issue and push the change at the earliest, would be really great.

@cagataycivici & @yigitfindikli, could either of you please check on this issue at the earliest?

• [ ] Add the orientation feature back.

[pmo1948]

a workaround I did for now, that works for setting it to the right (but still requires fine tuning per use case)
on the p-tabView add styleClass="orientation-right" and then define in scss

:host ::ng-deep {
    .orientation-right{
        display: flex;

        .p-tabview-nav {
            flex-direction: column;
            width: 10%;
        }

        .p-tabview-panels {
            width: 100%; // to have content take up remainder of space
        }
    }
}

disclaimer - I work with rtl support, so it may be a matter of adding flow-direction to orientation class to get it in the direction you desire

[anaq1]

I can confirm this bug in PrimeNG 11, we have to stop the update from version 9 because of this. Can somebody change the label? This is not an enhancement...

[ShashankHA]

Is there any update on this issue, I have primeng 11 in my local, still this issue exists. @cagataycivici , @yigitfindikli can you please check on this issue.
Does anyone have a workaround for this?

<=== Update ===>
My workaround for the issue to display headers oriented bottom:
::ng-deep .p-tabview.p-component {
display: flex;
flex-direction: column-reverse;
}