Responsive Scrollable Tabs - Right Arrow Hiding

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
david.molloy@dcu.ie
Posts: 4
Joined: 15 Aug 2019, 20:04

11 Apr 2022, 11:51

Hi,
This issue isn't limited to Avalon but certainly applies to it and all other templates.
In order to make tab view responsive, we enabled the nice new feature of [scrollable]="true" on the tab view which now lets mobile users move left and right through menu.

The only issue here is that in "normal" widescreen view, this leaves a redundant right arrow on the tab view menu on the right hand side.

The left arrow isn't shown, but the right arrow is, even when it's not needed.

To recreate, just take the basic Tab Blitz and add [scrollable]="true". Even if the browser is max size with plenty of space to show all menu items, it will show a slightly-confusing right arrow (which does nothing at this point)

Recreate Steps:
1. https://primeng-tabview-demo-plxlju.stackblitz.io
2. View in a full computer screen.
3. Default (first Tab View) shows a right chevron arrow despite having loads of space for all menu title options

Many thanks in advance.

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

14 Apr 2022, 10:15

david.molloy@dcu.ie wrote:
11 Apr 2022, 11:51
Hi,
This issue isn't limited to Avalon but certainly applies to it and all other templates.
In order to make tab view responsive, we enabled the nice new feature of [scrollable]="true" on the tab view which now lets mobile users move left and right through menu.

The only issue here is that in "normal" widescreen view, this leaves a redundant right arrow on the tab view menu on the right hand side.

The left arrow isn't shown, but the right arrow is, even when it's not needed.

To recreate, just take the basic Tab Blitz and add [scrollable]="true". Even if the browser is max size with plenty of space to show all menu items, it will show a slightly-confusing right arrow (which does nothing at this point)

Recreate Steps:
1. https://primeng-tabview-demo-plxlju.stackblitz.io
2. View in a full computer screen.
3. Default (first Tab View) shows a right chevron arrow despite having loads of space for all menu title options

Many thanks in advance.
Hi,

This error is caused by the PrimeNG core library. We marked for 13.Future milestone. You can track it at https://github.com/primefaces/primeng/issues/10674.

Regards.

david.molloy@dcu.ie
Posts: 4
Joined: 15 Aug 2019, 20:04

22 Apr 2022, 13:57

Thanks for coming back to me on this issue. That's much appreciated.
I hadn't come across this ticket so thanks for highlighting that link. That's exactly the experience being encountered, so will be good to see it resolve in future releases.

Thanks again,
Dave

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

04 May 2022, 13:57

Thanks a lot for the update!

Best Regards,

Post Reply

Return to “Avalon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests