I find that I must explicitly set a width in order for a Kendo React Chart to fill the parent's width if it is inside a Kendo React TabStrip.
This is true for any version of kendo-react-layout newer than 1.2.0-dev.201806281338.
This demonstrates the issue: https://stackblitz.com/edit/react-armuz6
Notice the chart outside of the TabStrip takes up the available width but the chart inside the TabStrip does not.
Also worth noting that other components that I nest inside of the TabStrip do not exhibit this. They take up the full width as expected.
1 Answer, 1 is accepted
0
Hello, Erik,
Thank you for the example.
This occurs because the TabStrip container is expanded based on its content. If the content does not have a specific width(as the Chart does not) it will expand to a default one.
I can suggest setting 100% width to the tab container, and this will ensure that all elements that expand based on the container will fill it:
https://stackblitz.com/edit/react-armuz6-syvaas?file=index.html
Regards,
Stefan
Progress Telerik
Thank you for the example.
This occurs because the TabStrip container is expanded based on its content. If the content does not have a specific width(as the Chart does not) it will expand to a default one.
I can suggest setting 100% width to the tab container, and this will ensure that all elements that expand based on the container will fill it:
.k-tabstrip>.k-content>.k-animation-container{ width: 100%}https://stackblitz.com/edit/react-armuz6-syvaas?file=index.html
Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items