Declined
Last Updated: 14 Jan 2019 06:31 by ADMIN
Joe
Created on: 10 Jan 2019 02:39
Category: KendoReact
Type: Bug Report
0
Setting a single tr in a row to colspan='100%' causes the other rows columns to have incorrect widths.

We are evaluating the React Grid component for our application and need to be able to have rows that span all columns.  To do this, I have created a rowRender function that, for some rows, will render a single <td> element with the colspan set to 100%.  The row renders fine, but the other rows, that have multiple <td> elements do not all render correctly.  For my test application, they will render with a width of 8 pxs.  On resize of a column, they will almost render correctly.

Here are some pictures of the issue in our test code.

https://drive.google.com/open?id=1bMwlUi7-7QiVHc6lubPiz45svHG1FSnS

I have created a sandbox that sort of reproduces the bug. https://codesandbox.io/s/w73v0x0mz8

If you select the "Show Full Row", the row with Id 999 will convert to a single <td> element with colspan='100%'.  You will notice how after doing so, the last three columns collapse to a small number of pixels.

 

Thanks

Joe

3 comments
Joe
Posted on: 11 Jan 2019 15:43
Thanks for helping me out.  I had a feeling I was causing the problem... 
ADMIN
Stefan
Posted on: 11 Jan 2019 07:13
Hello, Joe,

Thank you for the example.

The issue occurs because of the colSpan property accept only numbers and setting it to 100% breaks the rendering on the table:

https://www.w3schools.com/tags/att_td_colspan.asp

"Specifies the number of columns a cell should span."

If the colSpan is set to the number of columns than the example is working as expected:

https://codesandbox.io/s/n45z5y2r44

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
Joe
Posted on: 10 Jan 2019 02:42
Correction, that should be a <td> element in the title, not a <tr> element.