antd2, Tabs, TabPane styles

[plandem]

looks like at v2 there is css style issue.

When i have few tabs, each next TabPane a bit panned (content wrapped/panned).

E.g. for index 0 - correct:
https://www.dropbox.com/s/lu3kulv55bln7tn/Screenshot%202016-10-04%2017.49.34.png?dl=0

E.g. for index 1 - wrong:
https://www.dropbox.com/s/1y685q5cgrwwwen/Screenshot%202016-10-04%2017.53.13.png?dl=0

and for last index - wrong:
https://www.dropbox.com/s/uthucjtaqxl4jyi/Screenshot%202016-10-04%2017.51.53.png?dl=0

P.S.:
It's same content, i only changed order of TabPanes and have no any special styles for it - default styles.

[benjycui]

I am not sure if I understand your issue.

Did you mean that the padding or size or other style will change when you change tabs?

And it's hard to tell this difference from images... You had better to provide an online demo.

Please provide a re-producible demo: http://codepen.io/benjycui/pen/KgPZrE?editors=001

[plandem]

yep, padding is changing. It's only at Chrome. I will try to add to codepen, but not sure about time :(

[afc163]

Hard to reproduce this, if you have solved it, just give us a PR~

[plandem]

will try. I got same effect when have tabs at Modal - first tab with some Form and second Tab with table. When Form has some errors (red borders) then at second tab i still can see partial effects.

first tab:
https://www.dropbox.com/s/f3maom4lbxk7nf9/Screenshot%202016-10-12%2011.46.59.png?dl=0

second tab:
https://www.dropbox.com/s/lt9pskmnhwsc0qr/Screenshot%202016-10-12%2011.47.22.png?dl=0

also i have glitch with button that ignores small size, but i need some time to investigate - maybe problem from my side.

[plandem]

Ok, here is example with glitches:
http://codepen.io/anon/pen/bwQkvR?editors=0011

we have 2 issue here:

1. at tab2 we can see effects of fields with errors from tab1
2. tabs3/tab4 have some wrong panning.

[afc163]

You can dig this problem and give us PR direactly, we are short of hands now.

[plandem]

@afc163 it's quite hard to locate problem without deep knowledge of internals.

I found next: if width is not integer (and it's quite often with grid layout) then there can be this issue. If width is integer, then everything is ok. Looks like some kind of round issue. But i really don't know how to fix it.

here is example with my research:
http://codepen.io/anon/pen/dpLkAg?editors=0011

first block - width is 1400 and everything is ok, second block - width is 1405 and we have issue :(

[yesmeck]

@plandem

Seems like browser not works very well when we using percentage values with fractional pixels.

I've create another react-component/tabs#39 for tracing.

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.