[Bug] NavPills horizontal can not click

[clwater]

Version

v1.9

Reproduction link

https://jsfiddle.net/

Operating System

Mac

Device

PC

Browser & Version

Version 86.0.4240.111 (Official Build) (x86_64)

Steps to reproduce

add NavPills
set NavPills direction is horizontal ( as your provide example)
add 2 tabs
change the Chrome size

What is expected?

when i change the Chrome size, in sm size, the tab view over the tabButton, i can not click the tabButton.

What is actually happening?

when i change the Chrome size,
in ant size, i can click any tabButton;

---

Solution

Additional comments

[einazare]

Hello again, @clwater ,

The provided reproduction link redirects me on a blank jsfiddle. Was this intentional?

I've tested your issue, but I couldn't reproduce it, here is proof: https://imgur.com/a/M825Vzb

Could you please give us a similar video with the issue?

Best,
Manu

[clwater]

@einazare
I provide an demo in this issues.
link as https://i.imgur.com/XOtwuuT.gifv
is my tabsGrid or contentGrid have any question?

[einazare]

Hello again, @clwater ,

I did another check and it seems that they work as expected: https://imgur.com/a/lRZPvUk
Could you please tell us if you did any changes to our CSS/JSS/SCSS, or did you add new CSS/JSS/SCSS? Also, did you made changed to any of our dependencies? Or did you add new plugins to the NavPills component?
Anything that you changed, please leave it here, and I'll make further testings with the mentioned changes.

Best,
Manu

[clwater]

Hi @einazare
I am look for you provideo video,
This is my new test in this issues, https://imgur.com/9nS0WDV
In this video , i use your provide code template,
I just change the
horizontal={{
tabsGrid: { xs: 12, sm: 3, md: 4 },
contentGrid: { xs: 12, sm: 9, md: 8 }
}}
as
horizontal={{
tabsGrid: { xs: 12, sm: 1, md: 1 },
contentGrid: { xs: 12, sm: 11, md: 11 }
}}
, not change any other code, but in webview, the NavPills tab body over the tab header

[einazare]

Hello again, @clwater ,

Now I understand the issue at hand.
It seems we've made a mistake and did not calculate the posibility our users would actually use sm: 1, md: 1, lg: 1 for the tabsGrid.
To stop having this issue, please, do not use lower values of 3 for the tabsGrid widths.
In our next update, we will add an error for this.

Best,
Manu

[clwater]

@einazare
Ok, im understand, It look like i need change my web ui design.