3 Replies Latest reply on Aug 28, 2010 10:36 AM by ramos.eder

    CSS type selectors are not supported in components ?

    MrBritton
      If I put an <mx:Style> section in an MXML-based component, I get a number of warnings stating CSS type selectors are not supported in components. That said, the styles appear to actually work, and I'd sure like them to work. Is this a bug in the compiler, or is this truly not supported?
        • 1. Re: CSS type selectors are not supported in components ?
          MrBritton Level 1
          I take it back - they don't work. They affect style in Flex Builder's Design view(s), but don't do so when run in a browser. Ah, so many seemingly arbitrary rules to learn through experimentation, so little time...
          • 2. CSS type selectors are not supported in components ?
            JohnLeger
            What you have to do is assign the id and styleName to your component after you insert it into your Main.mxml file.

            For example: Let's say you have a component name MyHBox.mxml that you saved in a folder called view in your Application. Let's say you also have a style sheet named global.css in a folder named css. You cannot assign an ID or set the Style properties directly in the OPENING TAG of your component.

            YOU CAN'T DO THIS...

            <!--- Your MyHBox.mxml component STARTS---!>
            <mx:HBox id="myHbox" styleName="myStyle">

            <mx:Style source="css/global.css"/>

            <mx:Label text="Hello World"/>

            </mx:HBox>
            <!--- Your MyHBox.mxml component ENDS ---!>



            INSTEAD YOU DO THIS...

            <!--- Your MyHBox.mxml component STARTS---!>
            <mx:HBox>

            <mx:Label text="Hello World"/>

            </mx:HBox>
            <!--- Your MyHBox.mxml component ENDS ---!>


            Then in your Main.mxml file you do this...

            <!--- Your Main.mxml file STARTS---!>
            <?xml version="1.0"?>
            <mx:Application
            pageTitle="Your Awesome Application Title!"
            xmlns:mx=" http://www.adobe.com/2006/mxml"
            xmlns:view="view.*">

            <mx:Style source="css/global.css"/>

            <view:MyHBox id="myHBox" styleName="myStyle"/>

            </mx:Application>

            This should work! This will work whether the view:MyHBox component is in the Main.mxml file or within another component. You simply cannot set the id or styleName of the component directly inside the opening tag of the component. I hope this makes sense! Please let me know if this helps you.

            Happy FLEXing!

            John
            • 3. Re: CSS type selectors are not supported in components ?
              ramos.eder

              Hi!

              I have the same problem when I apply a style to a Panel, I have a Canvas component and contains a Panel inside, but I fail to apply the css.

              I call the css from the main file main.mxml, but when I load the component will give a warning message and does not apply the style. "CSS type selectors are not supported in components: 'Panel' "

               

              This is file main.mxml

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                    xmlns:comp="components.*" backgroundAlpha="0" horizontalScrollPolicy="off">

               

                   <mx:LinkBar dataProvider="myComp" horizontalCenter="0" y="380"/>

               

                   <mx:ViewStack id="myComp" horizontalCenter="0" resizeToContent="true">
                         <comp:component_01 height="100%" width="85%" label="HOME"/>
                         <comp:component_02 height="100%" width="85%" label="GALLERY"/>
                         <comp:component_03 height="100%" width="85%" label="TECHNOLOGY"/>
                    </mx:ViewStack>

               

                   <mx:Style source="skin_prototype02.css"/>

               

              </mx:Application>

               

               

              File component_02.mxml

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
                     
                    <mx:Panel title="Photo gallery" x="10" y="10" width="575"
                          horizontalScrollPolicy="off"> 
                     
                    </mx:Panel>

               

              </mx:Canvas>