.webix_dd_drag_column,.webix_ss_header TD,.webix_ss_vscroll_header - CSS is not working in IE 9

Webix JS
1

I am using air.css “webix UI v.2.1.5” and I have an application, where I am using the Tree Table, for Chrome the CSS is working for TD but for IE9 the CSS is not working properly and the background image is coming white.

Can you please help us.

CSS load in Chrome:

.webix_dd_drag_column,.webix_ss_header TD,.webix_ss_vscroll_header{
color:#1e2022!important;
box-shadow:0 1px 1px #fff inset;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#eaf3ff),color-stop(50%,#e5f1ff),color-stop(100%,#d6e8ff)) 0 1px repeat-x;/* background-image:-webkit-linear-gradient(top,#eaf3ff 0,#e5f1ff 50%,#d6e8ff 100%);
*/background-image:-moz-linear-gradient(top,#eaf3ff 0,#e5f1ff 60%,#d6e8ff 100%);
background-image:-ms-linear-gradient(top,#eaf3ff 0,#e5f1ff 60%,#d6e8ff 100%);
background-image:-o-linear-gradient(top,#eaf3ff 0,#e5f1ff 60%,#d6e8ff 100%)}

CSS Load in Internet Explorer - 9

.webix_dd_drag_column, .webix_ss_header td, .webix_ss_vscroll_header{
color:#1e2022!important;
box-shadow:0 1px 1px #fff inset;
}

2

Can you check the next link

http://webix.com/snippet/m/8f05ce2d

is it has the similar problem in IE9 or works correctly ? ( it works correctly while testing from my side )

3

Hello Maksim,

when I am using http://cdn.webix.io/1.8/skins/air.css from cdn, CSS are working perfectly for me, but when I am using webix_v2.1.5_pro air.css, then this problem is occurring and CSS is not loading properly.

Can you please validate with webix_v2.1.5_pro air.css, because we are using the upgrade version in our project.

If you try the same example with webix_v2.1.5_pro air.css, you will find the difference http://webix.com/snippet/m/8f05ce2d

4

Above code produces the same result while used with 2.1.5 air.css
We will double check the related css though.

Can you share a screen of the incorrect styling ? Are you using real IE8 or some IE testing tool ?

5

Hello Maksim,

We are not using any testing tool, we are using IE9

6

Hello Maksim,

can you please let us know how we can provide the screen print.

7

Just make a screenshot and post link here ( there is no way to attach files to the post - so you need to use some free screen sharing service )

8

Hello Maksim,

We do not have any screen share service as such in place, can you please run the below sample program in your system and test in IE9 Browser.

Please test in IE9 Browser, as we are facing this issue in IE9 Browser only.

<!DOCTYPE html>
<html>
<head><meta name='viewport' content='user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi' />
<script src='D:/webix_v2.1.5_pro/codebase/webix.js'></script>
<link rel='stylesheet' type='text/css' href='D:/webix_v2.1.5_pro/codebase/skins/air.css'></link>
</head>
<body>
<script>
var grid_data = [
	{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
	{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2},
	{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3},
	{ id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4},
	{ id:5, title:"My Fair Lady", year:1964, votes:533848, rating:8.9, rank:5},
	{ id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6}
];
webix.ready(function(){ webix.ui({
  rows:[
    { view:"datatable", autoConfig:true, data:grid_data, 
     dragColumn:true}
  ]
}); });</script></body></html>
9

Sorry, but I have run the above code locally and it still shows the correct styling with air skin
In your code there are direct links to js an css files, it seems that you run page directly in browser, without web-server. IE in such mode may use different set of settings ( force compatibility mode for example ) which may lead to the described issues.

By the way - we just released Webix 2.1.8, you can try it.

10

Hello Maksim,

We have add the new webix 2.1.8 CSs and Js in our project and as I have mentioned in the last conversation the same issue is occurring for this release as well.

I have tried putting the page in web server as well the same result came.

I am not understanding why this is happening only for air.css, why not for other css which comes in skins folder, only this CSS is causing issue, either I will run locally means direct path in the file and opening in browser or through web server.

Only air.css is causing, for other css everything is working as expected, as we have air.css as our base this is causing a bed impression to us on project, I would request you to please look in to the issue and it would be really appreciate your effort for us and also to make us life easy to use webix as extension for our component.

11

I was able to reconstruct the issue, fix will be included in the next build.

Meanwhile you can use skins/debug/air.css, not compressed version of css file is not affected by the above problem.

12

Thanks Maksim,

When can we expect the new build, and I need to check with you as I am scarred while upgrading the Webix build in project, because whenever I am using, I am getting new issues all the time.

13

You can grab the fixed css file by the next link

https://s3.amazonaws.com/uploads.hipchat.com/15721/61242/oLmY7uztqtvfOP2/air.zip

14

Thanks Maksim,

It is working and I really appreciate your support for the fix.