Hidden columns taking space

[Samuel]

Hi Telerik!

I am currently developping a responsive grid and I am having issues with hidding some columns when the display screen is small. 

I am successfully hidding the columns using same @media CSS, but even if the columns are not displayed they still occupy some place in the table.

 

I have 4 columns. There is no size specified for the first one since I want it to adjust to the available space. I have column 2 and 3 that I want to hide on small screen devices and I want column 4 to display all the time, 100px wide.

 

I am doing the following :

I have 4 columns with the following configurations :

<telerik:GridTemplateColumn HeaderText="Documents" HeaderStyle-CssClass="docCol" ItemStyle-CssClass="docCol"  AllowFiltering="false">

    <HeaderStyle  CssClass="docCol" />
    <ItemStyle CssClass="docCol" />
             <ItemTemplate>
                              bla bla bla
             </ItemTemplate>
</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Type" HeaderStyle-CssClass="typeCol" ItemStyle-CssClass="typeCol"  AllowFiltering="false">
    <HeaderStyle  CssClass="typeCol" />
    <ItemStyle CssClass="typeCol" />
             <ItemTemplate>
                              bla bla bla
             </ItemTemplate>
</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Category" HeaderStyle-CssClass="CategoryCol" ItemStyle-CssClass="CategoryCol"  AllowFiltering="false">
    <HeaderStyle  CssClass="CategoryCol" />
    <ItemStyle CssClass="CategoryCol" />
             <ItemTemplate>
                              bla bla bla
             </ItemTemplate>
</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Date" HeaderStyle-CssClass="dateCol" ItemStyle-CssClass="dateCol"  AllowFiltering="false">
    <HeaderStyle  CssClass="dateCol" />
    <ItemStyle CssClass="dateCol" />
             <ItemTemplate>
                              bla bla bla
             </ItemTemplate>
</telerik:GridTemplateColumn>

 

The CSS code is the following 

 

@media   (max-width: 450px) 
{
    .dd_client
    {
   width:180px !important;
}
.hidden-xs  
{
   display: none !important; 
}
    .docCol
{
    min-width: 100px;
}
.typeCol
{
   display: none !important;
}
.categoryCol
{
   display: none !important;
}
.dateCol
{
   width:100px;
}

}

 

What am I doing wrong. Please note that if I use "Display=False" then I don't have any display issues, but it isn't responsive anymore because the columns will always be hidden.

 

I attached a picture to show you what it looks like.

Thanks for your help!

[Samuel]

The problem is the same on a computer, where the hidden columns in CSS are taking some space.

[Samuel]

Anyone?

[Samuel]

Me again!

The only solution I found is to test for a small screen in C#, but then the radgrid doesn't adjust if the phone goes into landscape mode.
I really wish I could use the @media queries to hide some columns depending on the screen width.