Does SlickGrid work for IE6?

[josephou]

SlickGrid does not look fine under the IE6. Each time updating code from the downloaded source, there will be some amount of time spent to work with IE6. Should I skip the IE6 or continue to work with it or need a better way? I need suggestions regarding IE6 compatibility.

Thanks,

[mleibman]

If I understood you correctly, you have to make certain fixes to make SlickGrid look right with IE6. Why not contribute the fixes back to the trunk so you don't have to reapply them each time? ;)

[josephou]

Most of the changes will be related to css. However, the classes and id's are different in the slick.grid.css file from my previous downloaded source. I prefer just download the sources to update the code with minimal changes or no change at all.

[mleibman]

That's exactly what you will get if we merge your IE6 fixes into the main trunk.

[josephou]

I am new to putting fixes back to the main trunk. what are the procedures? Thanks!

[mleibman]

You can fork the project, commit and push your changes, and I'll be able to merge them into the trunk. Alternatively, just get the most recent source, apply your changes, and send them to me in an email.

[arkadiyk]

Hi, are there any plans to fix the grid for IE6 in the near future? Thank you!

[josephou]

Hi I am currently switched to other tasks not related to SlickGrid. I will let you know soon when I am back to this area. Thank you for the concern. Best Regards,

[josephou]

Hi, The following three styles fix IE6 the column header alignment and column moving: .ui-sortable { margin-left: -4px; } .slick-header.ui-state-default { width: auto; } .slick-header { width: 100%; }

Please let me know where you are going to merge these fixes.

Best Regards,

[vtjnash]

I noticed that IE6 doesn't support multiple classes, causing the jquery ui css rules to break on other elements, since IE6 only uses the last class selector and ignores the others.

For example: .slick-header.ui-state-default gets applied to tab headers and buttons, making their widths 100%

I found that the following changes are possible: 1) preceding every rule with a div tag 2) switching the order of the rules so that the jquery class comes first 3) adding another class to the elements, which is a concatenation of the tag names, and rewriting the rules to use them

Best Regards!

[miltonhowe]

Clarification @vtjnash:

IE6 fully and correctly supports multiple class names in the markup. The bug/shortcoming/oversight is that it does not support chaining multiple classes in the CSS selector. In the example selector, .slick-header.ui-state-default {rule-name: value;} modern browsers would apply this only to elements exposing both of those class names, e.g.

IE6 for reasons known only to a select few, ignores all but the final class in a chained selector, and will thus apply the example to all items exposing the class IE6 is a hard requirement for the project I am working on. I have tried applying the workarounds suggested here and it has been a phenomenal headache. Unfortunately I believe the only solution for Slickgrid would be to rewrite it without using chained CSS selectors, which I humbly suggest as a project for the author. At a minimum I would suggest posting a list on the home page pointing out the incompatibility. I mistakenly assumed Slickgrid would work with IE6 as it was jquery-based. Selector chaining is a convenience but is easily avoided with the creation of some new class names, although the naming can get a bit confusing admittedly. jQuery and jQueryUI manage without them. In the meantime, I have to bid adieu to Slickgrid :(

[vtjnash]

@miltonhowe

It appears to me that there are not actually that many dependencies on the chained selectors. I was primarily concerned (above) with how the slick-grid rules would affect the rest of the page, hence why two of my suggestions are merely partial covers to correct the rest of the page without a whole lot of concern for the look of the slick-grid. I should also add to that list that you could prefix every css rule with the css class of the slick-grid table. Looking through the code for slick.grid.js, it seems like it would be straightforward to fix the classes per my third suggestion above. You won't find a better table plugin out there than Slickgrid.

jQuery appears to manages to avoid using chaining by applying classes to the surrounding elements and building a DOM out of the needed combinations. You might have some luck in rewriting the rules in this manner; and the author would probably be more willing to merge these type of changes to the style sheet back into the trunk as they would hopefully involve less code changes and incompatibilities, and thus less debugging.

[araptarchis]

Hi everybody! I have just started experimenting with SlickGrid/IE6 by taking trying to make example1-simple.html work on IE6. Without any modification the last column ( "Effort Driven") isn't displayed correctly. Here are my 2c gathered with the help of my limited JS/CSS knowledge:

I replaced the chained classes with their concatination. This is often trivial (find/replace) but sometimes I had to dig into the code (and understand) the code ( which is easy because it is well written and documented,thx:) ), since the class attributes are often generated dynamically. One such example and relevant for the first example is the "appendRowHtml" method. There the "slick-row" and "ui-widget-content" are both added to the row div. The matching css rule is declared on ".slick-row.ui-widget-content", what as you mentioned isn't IE6 friendly. Now simply adding a "slick-row-ie6-ui-widget-content" class to the list of classes added to the row div does not solve the problem, because when defining the style for it, the "ui-widget-content" css rule ( from jquery-ui) overrides the slickgrid css rule. So a simple find/replace won't always work, because one has to think about the CSS Hierarchy aswell. As a brutal solution I just removed the "ui-widget-content" class from the row div. Now I have no idea what the deeper implications of my actions are, but it works for the first example :) Since I only need a simple visualization this is ( for me at least) a sufficient solution. I just wanted to post here, just in case somebody else has the same problem. I would also like to mention that it would indeed by very helpfull if the commiters would provide some info about the IE6 problems on the homepage since I too falsely assumed (at first) that is was compatible. Further I think IE6 compatibility should be interesting to the commiters, since the type of problem SlickGrid solves it typical for large goverment institutions around the world. And unfortunately goverment = IE6 in allot of cases.

[mleibman]

I have been on the fence about this for a while, but have recently made a decision not to pursue IE6 compatibility. Furthermore, I will not be merging IE6 workaround in the main branch. You are welcome, of course, to fork SlickGrid and make your changes available there.

I apologize for not calling it out in the wiki - I've added a small section explaining my take on it.

I will leave this issue open for now as a knowledge repository.

[StevePotter]

Good for you. My heart goes out to all that must support IE6 through whatever forces that be. But the fact is it's baggage and supporting it only supports the horrible policies that let it continue to live. I may get crucified for this, but any IT admin that lets IE6 exist in their enterprise should leave and go watch VHS tapes for eternity and then bitch when the latest hit doesn't come out on VHS.