Reading CSS values with Ext.util.CSS.getRule

[philiparad]

Let say we have two CSS files, one after the other:
First file with:

.ppp{
	position:absolute;
	left:8px;
	top:80px;
	width:310px;
	height:372px;
}

and second file with:

.ppp{
	position:absolute;
	left:8px;
	top:80px;
}

then Ext.util.CSS.getRule('.ppp').style.width return no value (NaN).
The function fails to go up to the first CSS to read the value.
(I do not want to repeat the values in the second file)

Regards
Philip Arad - Web Architect at Solaredge

[jsakalos]

.style property of the returned rule is CSSStyleDeclaration. So you need to :

Ext.util.CSS.getRule('.ppp').style.getPropertyValue('width'); // returns "310px" 

[philiparad]

Thanks for your reply

Philip

[philiparad]

Well... Actually it is working if they are in the same CSS file, one after the other, but not working if they are on separate files like:


<link rel="stylesheet" type="text/css" href="custom1.css"/>
<link rel="stylesheet" type="text/css" href="custom2.css"/>

Philip

[jsakalos]

getPropertyValue('width') doesn't work if they are in separate files?

[philiparad]

Correct. It returns an empty string.

Philip

[jsakalos]

It's strange and unexpected behavior but you're right. I have no idea how to easily resolve it besides repeating the styles in the second file (or putting them only in the second file). I suspect that this is how browsers work, not an Ext issu, nevertheless, if you want you can report it as a bug.

[philiparad]

Thanks again.

Philip

[Animal]

This is due to how Ext indexes the style objects associated with the rules.

They are keyed by the selector string, and so when Ext iterates through the stylesheets, it finds a selector ".ppp", and creates an entry in the rules object for it referencing that style object.

If it finds another rule for that selector, the new style object is stored keyed by the same string.

So only the latest one is stored.

I have recently fixed another slight problem in the CSS utility where rules like

.aaa, .bbb {
    color: red;

could not be found using

Ext.util.CSS.getRule('.aaa')

because the key associated with that style object is ".aaa, .bbb". We needed to split on "," and create two entries in the rules object.

It looks like we need to enable each entry to be either a style object or an array of style objects. But then getRule might then return an array, and you would have to interrogate each one in turn to see which one had a non-null style for "width"...

Maybe the problem would be more easily solved by creating a hidden div with class ".ppp", and then asking it what its width is.

[philiparad]

Thank for your reply

First, I have found out that
Ext.util.CSS.getRule('.'+css).style.getPropertyValue('width')
is not working with IE8, so I have to use:
Ext.util.CSS.getRule('.'+css,true).style.width
(I suppose it is true also for other attributes)

As for the CSS problem:

If we have:

 
.aaa{
	left:8px;
	top:80px;
	width:310px;
	height:372px;
}

and

.aaa{
	left:2px;
	top:20px;
}

I would expect one entry:

.aaa{
	left:2px;
	top:20px;
	width:310px;
	height:372px;
}

Philip