This is a migrated thread and some comments may be shown as answers.

Column Widths in Firefox being Ignored

13 Answers 211 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Levi asked on 11 Nov 2008, 07:05 PM

For some reason Firefox will not honor the columns widths set in:
<HeaderStyle Width="56px"></HeaderStyle>
...Unless I set widths on every single column, which I do not want.

I need one column to be flexible and stretch to whatever the remaining space is available. This works in IE, but not Firefox. While setting the column to a fixed width can solve the problem, this cause the grouping to break. If I group by a field, it pushes the grid content off the page since there is no room for the grouping column. If I could make a field flexible, it would then subtract from that width. IE does this as expected as well but not Firefox.The width properties do not appear to support "Auto". I tried creating a CSS class that used width:auto, but that did not seem to help and I also lost the style on my header.

That being said, I'm trying to achieve either of the following:
1) All fields fixed length except one. This field will become smaller when grouping is performed.
or
2) All fields fixed length. Grouping does not cause grid to go off the page by taking equal width from each of the columns, etc. to make room for the grouping column.

I'd rather not use a scrollbar which seems like a hack solution anyway.

Any ideas or best practices for this?

Thanks
Levi

13 Answers, 1 is accepted

answered on 14 Nov 2008, 02:34 PM

Hi Levi,

Here is a simple web page, which demonstrates 3 fixed-width columns and one variable width column (scenario 1). If you set Width to the last column, you got scenario 2, however, please note that if the sum of your column widths is smaller than the width of RadGrid, all columns will expand, unless you set width for the MasterTableView in pixels, which does not make much sense.

Let us know if you need more information.

    
            <%@ Page Language="C#" %> 
        
            <%@ Import Namespace="System.Data" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <script runat="server"> 
        
                protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
        
                { 
        
                    DataTable dt = new DataTable(); 
        
                    DataRow dr; 
        
                    int colsNum = 4; 
        
                    int rowsNum = 20; 
        
                    string colName = ""; 
        
                    for (int j = 1; j <= colsNum; j++) 
        
                    { 
        
                        dt.Columns.Add(String.Format("Column{0}", j)); 
        
                    } 
        
                    for (int i = 1; i <= rowsNum; i++) 
        
                    { 
        
                        dr = dt.NewRow(); 
        
                        for (int k = 1; k <= colsNum; k++) 
        
                        { 
        
                            colName = String.Format("Column{0}", k); 
        
                            dr[colName] = String.Format("{0} Row{1}", colName, i); 
        
                        } 
        
                        dt.Rows.Add(dr); 
        
                    } 
        
                    (sender as RadGrid).DataSource = dt; 
        
                } 
        
            </script> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>RadGrid for ASP.NET AJAX</title> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadGrid 
        
                ID="RadGrid1" 
        
                runat="server" 
        
                Skin="Vista" 
        
                OnNeedDataSource="RadGrid1_NeedDataSource" 
        
                AutoGenerateColumns="false" 
        
                > 
        
                <MasterTableView> 
        
                    <Columns> 
        
                        <telerik:GridBoundColumn HeaderText="My Column 1" DataField="Column1" HeaderStyle-Width="100px" /> 
        
                        <telerik:GridBoundColumn HeaderText="My Column 2" DataField="Column2" HeaderStyle-Width="100px" /> 
        
                        <telerik:GridBoundColumn HeaderText="My Column 3" DataField="Column3" HeaderStyle-Width="200px" /> 
        
                        <telerik:GridBoundColumn HeaderText="My Column 4" DataField="Column4" /> 
        
                    </Columns> 
        
                </MasterTableView> 
        
                <ClientSettings> 
        
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
        
                </ClientSettings> 
        
            </telerik:RadGrid> 
        
            </form> 
        
            </body> 
        
            </html>

Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 14 Nov 2008, 05:19 PM

No offense, but this makes the grid control pretty much useless in either Firefox or IE... I guess i have to pick one or the other. 16 pixel difference in every column width is no trivial thing. To tell people don't use padding... take a look at that idea yourself. It looks like crap.

Either I hardcode every size of every column and have the grid break when i do grouping or I leave one column without a width and have all the columns in Firefox look like bad compared to IE. What's the point of having a grid that generates HTML for me if the code is not friendly on both browsers. While it's IEs fault for not following standards, you guys shouldn't simply ignore this issues and believe me it's a big one.

Even your own demo doesn't display correctly in firefox:
http://demos.telerik.com/ASPNET/Prometheus/Grid/Examples/Programming/WebMail/DefaultCS.aspx

Check out the top right columns... has a white box. I see this problem all the time myself when doing grouping. There should also be a way to display a horizontal scroll bar without getting a vertical one. I'm forced to using one since I have to set widths on every column and have my grid resize beyond the allowed width when grouping.

Just a thought.. Firefox has a big market share right and simply ignoring it is no longer an option. Thanks for your help.
Levi

answered on 14 Nov 2008, 06:00 PM

Hello Levi,

The white box at the top-right corner of RadGrid observed in Firefox is related to a browser issue again:

http://blogs.telerik.com/DimoDimov/Posts/08-07-23/Browser_Inconsistencies_with_Scrolling_and_Padding.aspx

There is a way to fix this premanently, but requires changes in the RadGrid rendering, so we have logged this for future development.

As for how to get a horizontal scrollbar without a vertical one:

    
            <%@ Page Language="C#" %>  
        
            <%@ Import Namespace="System.Data" %>  
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>  
        
            <script runat="server">  
        
                protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)  
        
                {  
        
                    DataTable dt = new DataTable();  
        
                    DataRow dr;  
        
                    int colsNum = 30;  
        
                    int rowsNum = 7;  
        
                    string colName = "";  
        
                    for (int j = 1; j <= colsNum; j++)  
        
                    {  
        
                        dt.Columns.Add(String.Format("Column{0}", j));  
        
                    }  
        
                    for (int i = 1; i <= rowsNum; i++)  
        
                    {  
        
                        dr = dt.NewRow();  
        
                        for (int k = 1; k <= colsNum; k++)  
        
                        {  
        
                            colName = String.Format("Column{0}", k);  
        
                            dr[colName] = String.Format("{0} Row{1}", colName, i);  
        
                        }  
        
                        dt.Rows.Add(dr);  
        
                    }  
        
                    (sender as RadGrid).DataSource = dt;  
        
                }  
        
            </script>  
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
        
            <html xmlns="http://www.w3.org/1999/xhtml" >  
        
            <head runat="server">  
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
        
            <title>RadGrid for ASP.NET AJAX</title>  
        
            </head>  
        
            <body>  
        
            <form id="form1" runat="server">  
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" />  
        
            <telerik:RadGrid  
        
                ID="RadGrid1"  
        
                runat="server"  
        
                Skin="Vista"  
        
                OnNeedDataSource="RadGrid1_NeedDataSource"  
        
                >  
        
                <ClientSettings>  
        
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />  
        
                </ClientSettings>  
        
            </telerik:RadGrid>  
        
            </form>  
        
            </body>  
        
            </html>

Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 14 Nov 2008, 07:21 PM

There is a way to solve this problem... By wrapping all of the Header Text strings with another div which then applies the padding. This allows the heading to stay its fixed width. The other child div has no set width, which allows it to apply the padding with no problem no resizing issues. I hope you will consider this implementation on a future update.

That being said...
I was wondering if there is any way to easily override the Grid rendering, to always wrap the grid header text value in a DIV, which I could then apply my padding class to? So basically I want every single column header rendered to have a div inserted around it.

Thanks!
Levi

answered on 17 Nov 2008, 12:49 PM

Hi Levi,

XHTML doctype (and HTML Strict doctype as well) is supposed to turn on Internet Explorer's standards rendering mode. On the other hand, using a non-strict HTML doctype or not using a doctype at all will trigger the so called "quirks mode". However, IE standards mode is far from being the same as Firefox render mode.

You can use something like this in order to insert a <div> tag inside a header cell:

<telerik:GridBoundColumn HeaderText="<div>BoundCol</div>" />

However, if you use this while sorting is enabled, RadGrid will render non-valid XHTML markup.

The other way to insert <div> tags is to use TemplateColumns and HeaderTemplates.

As for data cells, there you can use DataFormatString for each column.

Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 17 Nov 2008, 06:07 PM

To anyone who is interested, here is how to get columns to appear the same width in both IE and Firefox while keeping the padding (spacing) intact. This is a bit of a hack so if anyone else knows a better way please let me know. I hope Telerik will consider a similiar implementation for a future update that will do this automatically using the HTML that is generated.

1) Create a pre-render event to wrap your header text in another div which will then apply a margin. There is no set width on this DIV which will prevent the overall column width from changing on IE vs. Firefox.

protected void RadGridSummary_PreRender(object sender, EventArgs e)

{

foreach (GridColumn col in RadGridSummary.MasterTableView.RenderColumns)

{

if (!col.HeaderText.Contains("<div")) // prevent editing on follow-up requests

col.HeaderText =

"<div class='gridHeaderText'>" + col.HeaderText + "</div>";

RadGridSummary.Rebind();

}

2) Create a css class called "gridHeaderText" to apply the necessary margin based on the skin you are using:

div.gridHeaderText

{

margin-left: 7px;

margin-right: 7px;

}

3) Cancel out the padding specified in the skin you are using (replacing Vista with SkinName)

.GridHeader_Vista

, .ResizeHeader_Vista, .GridHeader_Vista, .ResizeHeader_Vista

{

padding-right: 0;

padding-left: 0;

}

4) One important note: you must use group by expressions on all fields being modified with this method. This prevents the div from being used as part of the group by text.

5) There is also a small problem introduced with this method that I'm hoping someone can help me solve. Whenever sorting the sort arrow ends up below the field rather than the right. Using a span instead of a div fixes this but creates problems when the header label wrap or the label is centered. Floating works also, but creates additional problems as well. Here is the HTMl rendered:

<div class="gridHeaderText">Page Views</div>

</a>

</th>

Does anyone know how to resolve this without using a float? Display:inline works except when the column header label is centered and is two lines (i.e.: it word wraps).

Overall... Like I said, if anyone at Telerik or in the community knows a better way, please let me know. I found this method to be the cleanest and easiest as it automatically applies itself to all fields and doesn't require the use of headertemplates (which don't work if you want the sort hyperlinks to stay intact).

Levi

answered on 18 Nov 2008, 08:07 AM

Hello Levi,

You have to use <span>s instead of <div>s, because putting <div>s (block elements) inside <a>s (inline elements) is not XHTML compliant.

In addition, you don't need a CSS class for those <div>s (or <span>s), because you can target these elements in CSS selectors via their parent elements:

.GridHeader_SkinName span
{
/*......*/
}

Finally, regarding the layout problems when the sort icon appears, you can try playing a little more with styles, for example make the <a>s block-level:

.GridHeader_SkinName a
{
display:block;
}

Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 18 Nov 2008, 03:22 PM

I had tried using a span before, but it had a wrapping issue. The display:block you suggested seems to fix the problem if I apply it to the span itself. Not sure why, but the specific combination below seems to be the one that works. None the less it works perfect, so thanks and I hope this will be useful to others as well.

.GridHeader_MiWebVista

a, .ResizeHeader_MiWebVista a

{

display: inline-block;

}

.GridHeader_MiWebVista

span

{

margin-left: 7px;

margin-right: 7px;

margin-top: 0px;

margin-bottom: 0px;

display: block;

}

Any the updated code to use a span instead of a div:

protected void RadGridSummary_PreRender(object sender, EventArgs e)

{

foreach (GridColumn col in RadGridSummary.MasterTableView.RenderColumns)

{

if (!col.HeaderText.Contains("</span>")) // prevent editing on follow-up requests

col.HeaderText =

"<span class='gridHeaderText'>" + col.HeaderText + "</span>";

RadGridSummary.Rebind();

}

Thanks!
Levi

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Column Widths in Firefox being Ignored

13 Answers, 1 is accepted