Responsive RadGrid

[Jeff]

While following this tutorial to make my RadGrid stack columns vertically on a mobile device, I'm experiencing table width issues. 

In these screenshots, you can see that when I disable the element.style "width: 100%", the table renders as expected.  When it's enabled, the cells are all crammed in a narrow width.

So far, I've been unable to determine how to mimic this disabling in my CSS. 

Any ideas how to resolve?

 

 

[Jeff]

Quick update: I disabled the "table-layout: fixed" line, and re-enabled the "width: 100%" and the alignment is perfect. So, maybe it's the table-layout selector which is causing problems.

[Jeff]

These screen shots show the difference between disabling/enabling "table-layout: fixed"

When "fixed", the stacked columns are narrow.

When disabling "fixed", the columns are as expected, but the paging controls are off the page.

 

[Jeff]

Update: I've solved most of the issue by adding "!important" to setting the .RadGrid Table css selectors' table-layout property.

While this seemingly solves the problem for mobile device screen size, it also affects the normal size view, where the RadGrid is no longer the full width of the container.

My workaround is to make some of the other components and font sizes smaller, but, I'd rather be able to get directly to the appropriate css selector and apply the change where it only affects mobile device viewing.

[Attila Antal]

Hi Jeff,

As you can see the Tutorial we shared is working with the default structure. Depending on the current settings of the Grid, the structure would change and our example may not work for it. Please post the complete Grid declaration so we can take a look at the structure and we will advise you accordingly.

[Jeff]

Initially, I simply used your exact structure, and had the issues I described. Eventually I solved it by adding the missing "()" to invoke the fit-content method. Your sample code is missing the parenthesis. When I added them, the grid aligned properly.

I changed from this:

"mid-width: fit-content"

TO:

"mid-width: fit-content()"