Posts Tagged ‘CSS type selectors are not supported in components’

Flex Warning: CSS type selectors are not supported in components: ‘ColumnChart’

February 23, 2010

If you get the error/warning in Flex “CSS type selectors are not supported in components”, you are probably using Type selectors in your.css style sheet that are being referenced by a custom component (as I was), which throws a warning.
No effect was seen in the AIR app, but apparently it can cause problem is deployed in a browser. Changed the Type selectors to Class selectors, and it resolved, see my code below.

If your exporting as3 as a SWC component library, you have to name your styles.css file defaults.css, see Livedoc article and
Parallaxed.net article for more details of both.


[styles.css]
// Incorrect: using 'Type' selector:
ColumnChart{
  maxColumnWidth: 30;
}
// Correct: uses 'Class' selector
.columnChartStyle{
    maxColumnWidth: 30;
}

[MyColumnChart.mxml]
// dont tag the .css file here
<?xml version="1.0" encoding="utf-8"?>
<mx:ColumnChart xmlns:mx="http://www.adobe.com/2006/mxml"
              showDataTips="true"
              visible="true" height="100%" width="100%">  </mx:ColumnChart>

[MainApp.mxml]
// Call the source style sheet within the mxml
<mx:Style source="APP/assets/styles.css"/>
// Tag the ColumnChart with the 'Class' selector
<mx:ColumnChart
     id="myChart"
     styleName="columnChartStyle">
</mx:ColumnChart>
Advertisements