EasyUI Forum
June 20, 2024, 07:20:01 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1] 2
  Print  
Author Topic: Inline stylesheet not applied in IE  (Read 54994 times)
Ellipsis
Full Member
***
Posts: 113


View Profile WWW
« 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 Sad
« Last Edit: January 11, 2013, 03:04:14 AM by reno1979 » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: December 14, 2012, 11:59:39 AM »

A simple example to demonstrate this issue may be more appropriate.
Logged
Ellipsis
Full Member
***
Posts: 113


View Profile WWW
« Reply #2 on: December 17, 2012, 04:03:30 AM »

Ok I'll use jsFiddle, this week ...
Logged
Ellipsis
Full Member
***
Posts: 113


View Profile WWW
« Reply #3 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 !!
« Last Edit: January 11, 2013, 03:09:21 AM by reno1979 » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #4 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.
Logged
Ellipsis
Full Member
***
Posts: 113


View Profile WWW
« Reply #5 on: January 15, 2013, 08:28:07 AM »

Thank you !!

What is the chosen solution in the fix?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #6 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.
Logged
Ellipsis
Full Member
***
Posts: 113


View Profile WWW
« Reply #7 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 Wink ?
« Last Edit: January 16, 2013, 10:13:24 PM by Ellipsis » Logged
Ellipsis
Full Member
***
Posts: 113


View Profile WWW
« Reply #8 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)
« Last Edit: January 23, 2013, 08:59:19 AM by Ellipsis » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #9 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.
Logged
Ellipsis
Full Member
***
Posts: 113


View Profile WWW
« Reply #10 on: January 24, 2013, 04:27:31 AM »

Ok thank you, the fix seems to work.
Logged
Ellipsis
Full Member
***
Posts: 113


View Profile WWW
« Reply #11 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
« Last Edit: February 13, 2013, 02:25:50 AM by Ellipsis » Logged
Ellipsis
Full Member
***
Posts: 113


View Profile WWW
« Reply #12 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.
« Last Edit: March 14, 2013, 01:14:22 PM by Ellipsis » Logged
Ellipsis
Full Member
***
Posts: 113


View Profile WWW
« Reply #13 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.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #14 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?
Logged
Pages: [1] 2
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!