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

Column Widths in Firefox being Ignored

13 Answers 165 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Levi
Top achievements
Rank 1
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

Sort by
0
Dimo
Telerik team
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.
0
Levi
Top achievements
Rank 1
answered on 14 Nov 2008, 03:56 PM
I think I figured out what the problem is.... The IE columns are always 16px bigger which is the actual size i need. I see this problem alot, perhaps due to Firefox and IE handling padding differently. Is there a way to get them to display the same width in both Firefox and IE?

Thanks for your help!
0
Dimo
Telerik team
answered on 14 Nov 2008, 04:05 PM
Hello Levi,

You are right, IE and Firefox interpret column width settings differently - Firefox sets the column width as it is set, while Internet Explorer adds the table cells' left and right paddings to the column width setting.

In other words, in order to have the same look in both browsers, you should either use a skin with smaller side paddings for the cells (e.g. Office2007, WebBlue) or override the embedded skin and set smalled paddings:


How to override embedded skins

RadGrid skin selectors


Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Levi
Top achievements
Rank 1
answered on 14 Nov 2008, 04:09 PM
I know how to override the skins as I'm already doing so, but this does not help me. I need the padding to stay the same, but the overall columns widths to be consistent between both Firefox and IE. There are ways of doing this using P tags inside divs, but this would be a nightmare to implement for every column. I hope you guys will consider changing your model a bit in the future to ensure consistency on both browsers. Do you know any way to achieve consistent widths but keep the same padding?

Thanks,
Levi
0
Dimo
Telerik team
answered on 14 Nov 2008, 04:52 PM
Hello Levi,

Well, you can do some server-side browser detection and set different column widths for the two different browsers.

Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Levi
Top achievements
Rank 1
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
0
Dimo
Telerik team
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.
0
Levi
Top achievements
Rank 1
answered on 14 Nov 2008, 06:21 PM
Any time i use this:
<Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
...I get both horizontal and vertical scroll bars.

Another note on the widths... I read in several places that this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.... is supposed to force IE to render stuff the same as firefox. I have tried this with no luck. I was just wondering if you have heard this and if there is anything in the Grid rendering that would cause IE to ignore the DTD?

Thanks again,
Levi
0
Levi
Top achievements
Rank 1
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
0
Dimo
Telerik team
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.
0
Levi
Top achievements
Rank 1
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:


<th class="GridHeader_MiWebVista" style="text-align: center; cursor: move;" scope="col" title="Drag to group or reorder">

<a href="javascript:__doPostBack('ContentPanelsVisitorOverview$RadGridSummary$ctl00$ctl02$ctl01$ctl02','')" title="Click here to sort">
<div class="gridHeaderText">Page Views</div>
</a>
<input class="rgSortAsc" type="submit" title="Sorted asc" value=" " name="ContentPanelsVisitorOverview$RadGridSummary$ctl00$ctl02$ctl01$ctl03"/>
</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

0
Dimo
Telerik team
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.
0
Levi
Top achievements
Rank 1
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

Tags
Grid
Asked by
Levi
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Levi
Top achievements
Rank 1
Share this question
or