Print Page - Inline stylesheet not applied in IE

Title: Inline stylesheet not applied in IE
Post by: Ellipsis on December 14, 2012, 08:28:36 AM

I'm using multiple datagrids on a single page that use json files with some identical fieldnames (identifier for example).

My datagrid columns differ from the header, they fit the content they hold and do not apply the recommended style.
(tried fitColumns true and false)

so the two generated inline stylesheets : :

Datagrid 1

Code:

<style type="text/css">
div.datagrid-cell-c4-id {width:undefinedpx;}
div.datagrid-cell-c4-groupIdentifier {width:undefinedpx;}
div.datagrid-cell-c4-groupName {width:undefinedpx;}
div.datagrid-cell-c4-subjectIdentifier {width:undefinedpx;}
div.datagrid-cell-c4-subjectName {width:57px;}
div.datagrid-cell-c4-memberType {width:22px;}
div.datagrid-cell-c4-text {width:122px;}
</style>

Datagrid 2

Code:

<style type="text/css">
div.datagrid-cell-c1-identifier {width:72px;}
div.datagrid-cell-c1-subjectName {width:72px;}
div.datagrid-cell-c1-description {width:72px;}
div.datagrid-cell-c1-status {width:72px;}
div.datagrid-cell-c1-Studieadviseur {width:72px;}
</style>

I generate the datagrid only one time, and the html is only <table id="dg"/>.

Edit: It could be the IE 31 stylesheets limit.... I'll test this, the inline <style> tags are also counted :(

Title: Re: Inline style not applied in IE
Post by: stworthy on December 14, 2012, 11:59:39 AM

A simple example to demonstrate this issue may be more appropriate.

Title: Re: Inline style not applied in IE
Post by: Ellipsis on December 17, 2012, 04:03:30 AM

Ok I'll use jsFiddle, this week ...

Title: Re: Inline style not applied in IE
Post by: Ellipsis on January 11, 2013, 02:54:56 AM

A bit late, but here is the example:

http://jsfiddle.net/reno1979/g3sVm/

Open the subgrids, when you reach >31 stylesheets the styles will not be applied anymore .....

(Known IE bug)

Possible solutions:

I think a solution would be to be able to select if inline styles should be applied when fitcolumns: true is defined
It will generate a lot more code, but it solves this bug.
A more advanced and cleaner solution would be to extend the generated inline stylesheet.
Or even better, be able to add a custom class to a column in a datagrid, so the developer can use a custom external stylesheet. (when this option is chosen the autofit:true does how ever generate a 'conflicting' style ..? )
The possibility to add a custom column class would be much appreciated !!

Title: Re: Inline stylesheet not applied in IE
Post by: stworthy on January 15, 2013, 02:27:18 AM

This bug has been fixed. Please download the fixed datagrid plugin from http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js.

Title: Re: Inline stylesheet not applied in IE
Post by: Ellipsis on January 15, 2013, 08:28:07 AM

Thank you !!

What is the chosen solution in the fix?

Title: Re: Inline stylesheet not applied in IE
Post by: stworthy on January 15, 2013, 02:39:58 PM

The solution to solve this issue is reducing the stylesheet count. For the nested datagrid such as subgrid, only one stylesheet is used.

Title: Re: Inline stylesheet not applied in IE
Post by: Ellipsis on January 16, 2013, 04:14:50 AM

It seems the inline stylesheet is not always applied to the cells.
Only when I reload the grid the styles are 'detected', this occurs randomly.
I'll test some more te be sure.

I would prefer that the generated header would indeed be a <thead> section, this way the header column width will at least match the underlying content when something failes. Does this make any sense ;) ?

Title: Re: Inline stylesheet not applied in IE
Post by: Ellipsis on January 23, 2013, 08:33:36 AM

fix seems broken, the inline stylesheet is not always applied.

When reviewing the generated source I noticed that the 'counter' used in the class name was off by a random number.

so a generated example

Code:

<style type="text/css">.xxx-c13-xxxx{width:200px;}</style>

should actually point to .xxx-c11-xxxx

The header columns contain an inline style width, but this is different than the width given in the generated stylesheet.

Update: tested the original datagrid plugin send to us by mail, and this one works. (1.3.2)

Title: Re: Inline stylesheet not applied in IE
Post by: stworthy on January 23, 2013, 11:22:57 AM

Some updates have been applied to datagrid. Please download it from http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js.

Title: Re: Inline stylesheet not applied in IE
Post by: Ellipsis on January 24, 2013, 04:27:31 AM

Ok thank you, the fix seems to work.

Title: Re: Inline stylesheet not applied in IE
Post by: Ellipsis on February 08, 2013, 10:27:11 AM

Does the 1.3.2 zip file hold all the new files?

It seems that my combogrids cause recursive calls, causing the browser to hang. (Jquery.remove.delete keeps being called). I use a jquery .each loop to initialize the combogrids, sadly this suddenly causes some kind of loop somewhere. I'll jsfiddle a bit to see if I can reproduce the problem.

EDIT: Found cause, see http://www.jeasyui.com/forum/index.php?topic=1369.0 (http://www.jeasyui.com/forum/index.php?topic=1369.0)

Title: Re: Inline stylesheet not applied in IE
Post by: Ellipsis on March 14, 2013, 09:00:43 AM

Bug is back...

when using the loadData method, the columns are not the correct width.
Again the identifiiers in the generated stylesheet are off.

Calling fitColumns, resize etc etc does not work, a sort however does.
I'll try to simulate with a fiddle, it could also be the extension of the afterRender event I use.

Title: Re: Inline stylesheet not applied in IE
Post by: Ellipsis on March 21, 2013, 09:07:26 AM

To be more exact: When using multipe combogrids on a page only the first generated stylesheet has corresponding class identifiers.

Title: Re: Inline stylesheet not applied in IE
Post by: stworthy on March 21, 2013, 06:06:54 PM

Although using multiple combogrid components on one page but can not found the issue you describe. Could you provide a simple example to shows how to make your issue appears?

Title: Re: Inline stylesheet not applied in IE
Post by: Ellipsis on March 21, 2013, 10:36:01 PM

Ok I'll extend the fiddle

update: mmm On fiddle I can't recreate the problem, I'll try some more later.

EasyUI Forum

General Category => Bug Report => Topic started by: Ellipsis on December 14, 2012, 08:28:36 AM