I have a webgrid with fixed headers and footers that is having some weird rendering issues in IE 7. THe grid works beautifully in Firefox and safari, but IE doesn't seem to want to behave. The attached image shows the problem I am having. My page is set to XHTML 1.0 transitional mode and I have the webgrid wrapped in a DIV with position: relative in the style, but to no avail. Nothing seems to work to fix the problem. Any help would be appreciated. Here is my markup for the grid:
<igtbl:UltraWebGrid ID="wg" runat="server" Width="810px" Height="350px"> <DisplayLayout ColWidthDefault="37px" StationaryMargins="HeaderAndFooter" AutoGenerateColumns="False" AllowSortingDefault="Yes" RowHeightDefault="20px" HeaderClickActionDefault="SortMulti" RowSelectorsDefault="No" Name="wg" TableLayout="Fixed" CellClickActionDefault="NotSet" SelectTypeRowDefault="Single" OptimizeCSSClassNamesOutput="true" ColFootersVisibleDefault="yes"> <HeaderStyleDefault Height="180px"> </HeaderStyleDefault> <FrameStyle Width="810px" Height="350px"> </FrameStyle> <FooterStyleDefault Height="55" Font-Size="8pt" Font-Bold="true" VerticalAlign="top" HorizontalAlign="center" Font-Names="Arial"> </FooterStyleDefault> </DisplayLayout> <Bands> <igtbl:UltraGridBand> </igtbl:UltraGridBand> </Bands> </igtbl:UltraWebGrid>
I've submitted this as a support request, but so far have gotten nothing back. These rendering errors are becoming increasingly frustrating. I run into new ones every time a release comes out.
After some investigation I can add this additional info (which does not fix it at all):
Not sue is this is related but I have found that if you want to hide columns in yoru grid (say DataColumnID field) then these must be the right most columns or I get this kind of behavior. Are you trying to hide any such columns?
Thanks for your input, but having hidden columns doesn't seem to cause or alleviate the problem. Every grid in my application is suffering from this problem in IE - hidden columns or not. I do have to mention that I am using the grids in a DotNetNuke 4.8.2 installation with XHTML 1.0 transitional turned on.
The grids work fine in Quirks mode in IE 7, but as soon as I switch to Standards mode, the grids in IE go haywire. Firefox and Safari work beautifully, however.
We have had a similar issue, and found in our case, we could have the grid overflowing it's frame (actually, I think it was the DIV) similar to what yours showed when we did the following in the aspx
<some javascript>
foo foo('<%= UltraWebGrid.ClientID%>');
</script>
<igblah grid stuff>
</ig grid>
However, if we simply moved all javascript where we had forced getting the ClientID from before the grid was declared in the page, to after the grid was declared, it resolved the issue.
Good luck!
Would you mind providing your code as an example? I have added the JavaScript and the tag in the DisplayLayout section, however my JavaScript is not firing. I placed an alert popup box in the code and I'm not seeing the message. Thanks.
I'm experiencing the exaxt same problem - grid rows pop back into place when I use scroll bars. Did you find a resolution? Any help would be appreciated. Thanks
Thanks for your reply.
I was hoping that this would fix my problem since I felt it might be a problem with the position style, but now it doesn't "pop" back in place, it just stays at the bottom of the screen. I'll have to keep searching...
You can place the following tag in the DisplayLayout section of the grid markup:
<ClientSideEvents InitializeLayoutHandler="Ultrawebgrid1_InitializeLayoutHandler" />
That should force the grid to call this javascript function during the IntializeLayout event. Though it sounds like your problem is a little different than mine in that yours eventually "pops" into place. Mine never corrected itself.
I believe I have a similar problem, my grid is appearing at the bottom of my page, underneath the content area, then if I scroll down and mouseover the grid it "pops" into place in the content area. It then remains fixed in that spot, even if I scroll up and down the page. This only happens in IE7, not in Firefox.
I tried to implement the code in your post, but haven't had success. Where do you place the function call for the script?
Thanks!