This question is locked. New answers and comments are not allowed.
I have a grid control with a tab strip in the detail section. The tab strip contains a long string of text and I have found in the 2011.1.315 controls the long string causes the grid headers to shift, depending on how wide the detail section is. It's hard to explain so I'll provide some screen shots. The site is displayed from IE8.
Here is how the site looks under 2010.3.1110, using the webblue theme:
http://oi52.tinypic.com/2m3h73p.jpg
Here is the site again from debug mode under 2011.1.315, with the detail section hidden:
http://oi56.tinypic.com/mbn7fl.jpg
now expanded:
http://i51.tinypic.com/2iu3odl.jpg
I've narrowed it down to the long text string. Removing all the CSS from the detail section and just displaying the raw text still causes the grid columns to shift. If the string is shorter then the columns shift less. I compared the old and new common css file and couldn't find any differences in the tags for the grid header, so I'm not sure what has changed to cause this issue.
Here is how the site looks under 2010.3.1110, using the webblue theme:
http://oi52.tinypic.com/2m3h73p.jpg
Here is the site again from debug mode under 2011.1.315, with the detail section hidden:
http://oi56.tinypic.com/mbn7fl.jpg
now expanded:
http://i51.tinypic.com/2iu3odl.jpg
I've narrowed it down to the long text string. Removing all the CSS from the detail section and just displaying the raw text still causes the grid columns to shift. If the string is shorter then the columns shift less. I compared the old and new common css file and couldn't find any differences in the tags for the grid header, so I'm not sure what has changed to cause this issue.
8 Answers, 1 is accepted
0
Nathaniel
Top achievements
Rank 1
Rank 1
answered on 07 Jul 2011, 02:15 AM
Has anyone else experienced this grid shifting?
I have since tried the beta for v2011.2.629 and I'm still having the same problem. I've also tried wrapping the grid control in a table and setting table-layout to fixed, but that didn't do anything.
I've been able to convert my app to MVC3 using the razor view engine and this is the last thing holding me up from a release.
I have since tried the beta for v2011.2.629 and I'm still having the same problem. I've also tried wrapping the grid control in a table and setting table-layout to fixed, but that didn't do anything.
I've been able to convert my app to MVC3 using the razor view engine and this is the last thing holding me up from a release.
0
Hi Nathaniel,
I am afraid I cannot reproduce such an issue locally, based on the screenshots, so I am unable to provide any advice at the moment. Can you please send a simple runnable demo, which shows the unexpected behavior? Thank you in advance.
Greetings,
Dimo
the Telerik team
I am afraid I cannot reproduce such an issue locally, based on the screenshots, so I am unable to provide any advice at the moment. Can you please send a simple runnable demo, which shows the unexpected behavior? Thank you in advance.
Greetings,
Dimo
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Nathaniel
Top achievements
Rank 1
Rank 1
answered on 08 Jul 2011, 11:30 PM
I've been putting together a demo that demonstrates the header shift, but I looked through some of your online demos and found a couple examples here: http://demos.telerik.com/aspnet-mvc/razor/grid/hierarchyserverside and here: http://demos.telerik.com/aspnet-mvc/razor/grid/detailsserverside
Expand the details in a row and/or click on the detail tabs and you can see the column headers of the topmost grid change in size. This didn't happen before.
Expand the details in a row and/or click on the detail tabs and you can see the column headers of the topmost grid change in size. This didn't happen before.
0
Hello Nathaniel,
I am afraid I do not observe the described behavior on our online demos. What browser are you using? I tested with Firefox 5, IE7, IE9 and Chrome.
Best wishes,
Dimo
the Telerik team
I am afraid I do not observe the described behavior on our online demos. What browser are you using? I tested with Firefox 5, IE7, IE9 and Chrome.
Best wishes,
Dimo
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Nathaniel
Top achievements
Rank 1
Rank 1
answered on 11 Jul 2011, 08:13 PM
I originally built the app when we were using IE6, then our tech department updated the browsers to IE8, everything worked ok in both browsers before the v2011.1.315 update. I was using v2010.3.1318 at the time. Now we are only using IE8 and I see the column resizing in v2011.1.315 and v2011.2.629
I have my doctype on my main layout page set to
and the doctype of the demos are using
so I'm not sure if changing my doctype will make a difference either.
I have my doctype on my main layout page set to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">and the doctype of the demos are using
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">so I'm not sure if changing my doctype will make a difference either.
0
Hello Nathaniel,
The DOCTYPE does nto make any difference, because browsers behave the same when using XHTML 1.0 and XHTML 1.1.
Indeed, the header shifting is observed in IE8. It can be avoided by adding a table-layout:fixed style to the Grid table(s) that suffer from the issue. Use TableHtmlAttributes() or an external CSS style. On a side note, turning on Grid scrolling applies the fixed layout style automatically.
Best wishes,
Dimo
the Telerik team
The DOCTYPE does nto make any difference, because browsers behave the same when using XHTML 1.0 and XHTML 1.1.
Indeed, the header shifting is observed in IE8. It can be avoided by adding a table-layout:fixed style to the Grid table(s) that suffer from the issue. Use TableHtmlAttributes() or an external CSS style. On a side note, turning on Grid scrolling applies the fixed layout style automatically.
Best wishes,
Dimo
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Nathaniel
Top achievements
Rank 1
Rank 1
answered on 15 Jul 2011, 07:15 PM
Thank you Dimo! I added this to my main grid control:
And that solved the weird column shift. Incidentally, adding the style to an external css file doesn't apply it to the grid control as I had previously tried that. I tried it again before using TableHtmlAttributes.
I also had to adjust my right most column because it was getting pushed out of view even though my middle columns don't have set widths. I have an edit button in the last column. I set the left margin to 0px and right to auto, then kept increasing the column width until my edit button came back into view. This also happens when I try to use grid scrolling.
.TableHtmlAttributes(new { style = "table-layout: fixed;" })And that solved the weird column shift. Incidentally, adding the style to an external css file doesn't apply it to the grid control as I had previously tried that. I tried it again before using TableHtmlAttributes.
I also had to adjust my right most column because it was getting pushed out of view even though my middle columns don't have set widths. I have an edit button in the last column. I set the left margin to 0px and right to auto, then kept increasing the column width until my edit button came back into view. This also happens when I try to use grid scrolling.
0
Hi Nathaniel,
If a given style is applied when it is an inline style, and is not applied when it is an external style, then you should look for conflicting styles with higher specificity. Firebug will show you what overrides the external table-layout:fixed style. Also, double-check that the CSS selector of the external CSS rule is correct.
Best wishes,
Dimo
the Telerik team
If a given style is applied when it is an inline style, and is not applied when it is an external style, then you should look for conflicting styles with higher specificity. Firebug will show you what overrides the external table-layout:fixed style. Also, double-check that the CSS selector of the external CSS rule is correct.
Best wishes,
Dimo
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!