Firefox and IE both render perfectly and honor the styling that is placed in the formatting sections of the grid definition; Chrome appears to disregard.
Just for kicks if we consider the data grid code below, Firefox and IE both nicely follow the width definition of each column and the matrix looks exactly as expected. Chrome on the other hand has each and every column the exact same width or it seems to format the width by the length of the largest string in the header of the grid.
Here's the code;
<ww:wwWebDataGrid ID="Main_Display_Grid" runat="server" Width="880px"
PagerText="Next Set:" PageSize="48" AlternatingItemCssClass="" CellPadding="0"
Font-Names="Segoe UI" Font-Size="8pt" HeaderCssClass="loginheader"
PagerCssClass="errordisplay" DataKeyField="pk">
<Columns>
<ww:wwWebDataGridColumn ID="wwWebDataGridColumn001" runat="server"
Expression="Description" HeaderText="Super Shoes Sales Attribute"
Format="=this.page.formatDescription"
ItemAttributeString="align='left';"
HeaderAttributeString="Style='font-size:7pt;'"
Style="width:210px; font-size:7pt; padding:0px;">
</ww:wwWebDataGridColumn>
<ww:wwWebDataGridColumn ID="wwWebDataGridColumn002" runat="server"
Expression="theMean" HeaderText="x̄ "
HeaderAttributeString="Style='font-size:7pt;'" Format="=this.page.dollarFormat"
ItemAttributeString="align='right';" Style="width:70px; font-size:7pt; padding:0px;">
</ww:wwWebDataGridColumn>
<ww:wwWebDataGridColumn ID="wwWebDataGridColumn003" runat="server"
Expression="seg_mean_idx" HeaderText="x̄ Index - Seg Benchmark"
HeaderAttributeString="Style='font-size:7pt;'" Format="=this.page.formatIndexMatrix"
ItemAttributeString="align='right';" Style="width:70px; font-size:7pt; padding:0px;">
</ww:wwWebDataGridColumn>
<ww:wwWebDataGridColumn ID="wwWebDataGridColumn004" runat="server"
Expression="dcbase_mean_idx" HeaderText="x̄ Index - D-C Benchmark"
HeaderAttributeString="Style='font-size:7pt;'" Format="=this.page.formatIndexMatrix"
ItemAttributeString="align='right';" Style="width:70px; font-size:7pt; padding:0px;">
</ww:wwWebDataGridColumn>
more column def<ww:wwWebDataGridColumn ID="wwWebDataGridColumn049" runat="server"
Expression="iif( groupfamily=0 .and. !empty(varname), HREF(this.Page.GetPostbackEventReference('this','SGAFunction', 'ssmain~'+trans(GridId), .T. ),[ X ]), '' )"
HeaderText="Graph"
HeaderAttributeString="Style='font-size:7pt;'"
ItemAttributeString="align='center';" Style="width:40px; font-size:6pt; padding:0px;">
</ww:wwWebDataGridColumn>
</Columns>
</ww:wwWebDataGrid>
When you render, Chrome has the first column maybe 100px wide at the most; IE and Firefox each have it properly at 210px. Frankly the grid looks absolutely messed up under Chrome and is really perfect in everything else....
Does anyone have any idea how to handle these rendering issue in Chrome?
thx.
Serge
Rendering Data Grids under Chrome vs. IE and Firefox Rick Strahl
Serge
Jul 24, 2014 @ 12:29pm
Not sure. I don't really see that but it I guess it depends on the actual layout. Browsers do get to decide how to render tables and depending on the amount of data in the grid they'll adjust the widths to make everything fit into the width you specify. It depends on wrapping and the min widths will have to adapt to ensure that the first text element at least will fit and that can cause forced resizing that will override hardcoded widths.
You can work with the overflow css tags to truncate content which will guarantee that sizes are respected.
+++ Rick ---
Has anyone else had trouble with the way Google Chrome renders - in particular data grids?
Firefox and IE both render perfectly and honor the styling that is placed in the formatting sections of the grid definition; Chrome appears to disregard.
Just for kicks if we consider the data grid code below, Firefox and IE both nicely follow the width definition of each column and the matrix looks exactly as expected. Chrome on the other hand has each and every column the exact same width or it seems to format the width by the length of the largest string in the header of the grid.
Here's the code;
<ww:wwWebDataGrid ID="Main_Display_Grid" runat="server" Width="880px"
PagerText="Next Set:" PageSize="48" AlternatingItemCssClass="" CellPadding="0"
Font-Names="Segoe UI" Font-Size="8pt" HeaderCssClass="loginheader"
PagerCssClass="errordisplay" DataKeyField="pk">
<Columns>
<ww:wwWebDataGridColumn ID="wwWebDataGridColumn001" runat="server"
Expression="Description" HeaderText="Super Shoes Sales Attribute"
Format="=this.page.formatDescription"
ItemAttributeString="align='left';"
HeaderAttributeString="Style='font-size:7pt;'"
Style="width:210px; font-size:7pt; padding:0px;">
</ww:wwWebDataGridColumn>
<ww:wwWebDataGridColumn ID="wwWebDataGridColumn002" runat="server"
Expression="theMean" HeaderText="x̄ "
HeaderAttributeString="Style='font-size:7pt;'" Format="=this.page.dollarFormat"
ItemAttributeString="align='right';" Style="width:70px; font-size:7pt; padding:0px;">
</ww:wwWebDataGridColumn>
<ww:wwWebDataGridColumn ID="wwWebDataGridColumn003" runat="server"
Expression="seg_mean_idx" HeaderText="x̄ Index - Seg Benchmark"
HeaderAttributeString="Style='font-size:7pt;'" Format="=this.page.formatIndexMatrix"
ItemAttributeString="align='right';" Style="width:70px; font-size:7pt; padding:0px;">
</ww:wwWebDataGridColumn>
<ww:wwWebDataGridColumn ID="wwWebDataGridColumn004" runat="server"
Expression="dcbase_mean_idx" HeaderText="x̄ Index - D-C Benchmark"
HeaderAttributeString="Style='font-size:7pt;'" Format="=this.page.formatIndexMatrix"
ItemAttributeString="align='right';" Style="width:70px; font-size:7pt; padding:0px;">
</ww:wwWebDataGridColumn>
more column def<ww:wwWebDataGridColumn ID="wwWebDataGridColumn049" runat="server"
Expression="iif( groupfamily=0 .and. !empty(varname), HREF(this.Page.GetPostbackEventReference('this','SGAFunction', 'ssmain~'+trans(GridId), .T. ),[ X ]), '' )"
HeaderText="Graph"
HeaderAttributeString="Style='font-size:7pt;'"
ItemAttributeString="align='center';" Style="width:40px; font-size:6pt; padding:0px;">
</ww:wwWebDataGridColumn>
</Columns>
</ww:wwWebDataGrid>
When you render, Chrome has the first column maybe 100px wide at the most; IE and Firefox each have it properly at 210px. Frankly the grid looks absolutely messed up under Chrome and is really perfect in everything else....
Does anyone have any idea how to handle these rendering issue in Chrome?
thx.
Serge
West Wind Technologies
Making waves on the Web
from Maui
Rendering Data Grids under Chrome vs. IE and Firefox Rick Strahl
Rick Strahl
Jul 24, 2014 @ 12:31pm
That should work but make sure both virtuals are using the same App Pool and hte permissions are set properly on both. THe 404 may have nothing to do with the script map but the fact that the file doesn't exist (make sure that you uncheck file must exist flag)...
+++ Rick ---
Serge,
Not sure. I don't really see that but it I guess it depends on the actual layout. Browsers do get to decide how to render tables and depending on the amount of data in the grid they'll adjust the widths to make everything fit into the width you specify. It depends on wrapping and the min widths will have to adapt to ensure that the first text element at least will fit and that can cause forced resizing that will override hardcoded widths.
You can work with the overflow css tags to truncate content which will guarantee that sizes are respected.
+++ Rick ---
Has anyone else had trouble with the way Google Chrome renders - in particular data grids?
Firefox and IE both render perfectly and honor the styling that is placed in the formatting sections of the grid definition; Chrome appears to disregard.
Just for kicks if we consider the data grid code below, Firefox and IE both nicely follow the width definition of each column and the matrix looks exactly as expected. Chrome on the other hand has each and every column the exact same width or it seems to format the width by the length of the largest string in the header of the grid.
Here's the code;
<ww:wwWebDataGrid ID="Main_Display_Grid" runat="server" Width="880px"
PagerText="Next Set:" PageSize="48" AlternatingItemCssClass="" CellPadding="0"
Font-Names="Segoe UI" Font-Size="8pt" HeaderCssClass="loginheader"
PagerCssClass="errordisplay" DataKeyField="pk">
<Columns>
<ww:wwWebDataGridColumn ID="wwWebDataGridColumn001" runat="server"
Expression="Description" HeaderText="Super Shoes Sales Attribute"
Format="=this.page.formatDescription"
ItemAttributeString="align='left';"
HeaderAttributeString="Style='font-size:7pt;'"
Style="width:210px; font-size:7pt; padding:0px;">
</ww:wwWebDataGridColumn>
<ww:wwWebDataGridColumn ID="wwWebDataGridColumn002" runat="server"
Expression="theMean" HeaderText="x̄ "
HeaderAttributeString="Style='font-size:7pt;'" Format="=this.page.dollarFormat"
ItemAttributeString="align='right';" Style="width:70px; font-size:7pt; padding:0px;">
</ww:wwWebDataGridColumn>
<ww:wwWebDataGridColumn ID="wwWebDataGridColumn003" runat="server"
Expression="seg_mean_idx" HeaderText="x̄ Index - Seg Benchmark"
HeaderAttributeString="Style='font-size:7pt;'" Format="=this.page.formatIndexMatrix"
ItemAttributeString="align='right';" Style="width:70px; font-size:7pt; padding:0px;">
</ww:wwWebDataGridColumn>
<ww:wwWebDataGridColumn ID="wwWebDataGridColumn004" runat="server"
Expression="dcbase_mean_idx" HeaderText="x̄ Index - D-C Benchmark"
HeaderAttributeString="Style='font-size:7pt;'" Format="=this.page.formatIndexMatrix"
ItemAttributeString="align='right';" Style="width:70px; font-size:7pt; padding:0px;">
</ww:wwWebDataGridColumn>
more column def<ww:wwWebDataGridColumn ID="wwWebDataGridColumn049" runat="server"
Expression="iif( groupfamily=0 .and. !empty(varname), HREF(this.Page.GetPostbackEventReference('this','SGAFunction', 'ssmain~'+trans(GridId), .T. ),[ X ]), '' )"
HeaderText="Graph"
HeaderAttributeString="Style='font-size:7pt;'"
ItemAttributeString="align='center';" Style="width:40px; font-size:6pt; padding:0px;">
</ww:wwWebDataGridColumn>
</Columns>
</ww:wwWebDataGrid>
When you render, Chrome has the first column maybe 100px wide at the most; IE and Firefox each have it properly at 210px. Frankly the grid looks absolutely messed up under Chrome and is really perfect in everything else....
Does anyone have any idea how to handle these rendering issue in Chrome?
thx.
Serge
West Wind Technologies
Making waves on the Web
from Maui