Responsive RadGrid

2 Answers 36 Views
Grid Styling
Jeff
Top achievements
Rank 2
Iron
Iron
Veteran
Jeff asked on 04 May 2021, 12:56 PM

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
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 04 May 2021, 02:09 PM

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.

2 Answers, 1 is accepted

Sort by
0
Jeff
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 04 May 2021, 02:31 PM

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
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 04 May 2021, 04:36 PM

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
Telerik team
commented on 07 May 2021, 10:45 AM

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.

0
Jeff
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 11 May 2021, 11:39 AM
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()"
Tags
Grid Styling
Asked by
Jeff
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Jeff
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or