6 Replies Latest reply on Apr 20, 2009 8:51 AM by Cindy.Herrman

    ComboBox inheriting button skin - how to override

    Cindy.Herrman

      Using Flex Builder 3.

      I have set up a Button style in the stylesheet so all buttons pick up the up, over, and down skins.

      The problem is no matter what I do I cannot get the ComboBox to not use the skins defined for Button.

      Is there a way of overriding the skins to not use a skin.  I've set up a specific style for the ComboBox, but it still picks up the button skins.  I've tried both using ComboBox for the style descriptor and set a specific style name like myComboBox and set the style on the combo box in the mxml.

      What is strange is that from the documentation it doesn't look like ComboBox inherits any styles from Button.  So this makes no sense.

      Any ideas?

       

      Thanks,

       

      Cindy

        • 1. Re: ComboBox inheriting button skin - how to override
          Michael Borbor Level 4

          Hi Cindy, could you post a little bit of stylesheet  code that applies to the button?

          • 2. Re: ComboBox inheriting button skin - how to override
            Cindy.Herrman Level 1

            Button in stylesheet:

             

             

             

             

             

             

             

             

             

             

             

            Button

             

             

            {

             

             

            corner-radius: 3;

             

             

            font-size: 11;

             

             

            font-weight: normal;

             

             

            color: #0860AB;

             

             

            up-skin: Embed(source="../images/bttn-bg-off2.gif",scaleGridLeft="5",scaleGridTop="5",scaleGridRight="17",scaleGridBottom="11");

             

             

            over-skin: Embed(source="../images/newBlueButtonOver2.png",scaleGridLeft="3",scaleGridTop="4",scaleGridRight="22",scaleGridBottom="13");

             

             

            down-skin: Embed(source="../images/newBlueButtonDown.png",scaleGridLeft="3",scaleGridTop="4",scaleGridRight="22",scaleGridBottom="13");

             

             

            padding-top: 0;

             

             

            padding-bottom: 0;

             

             

            padding-left: 5;

             

             

            padding-right: 5;

            }

             

            style set up for combo box in mxml:  dropdownStyleName="myDropDown"

             

            .myDropDown

             

            {

             

            corner-radius: 0;

             

            fill-colors: #FFFFFF, #FFFFFF;

             

            fill-alphas: 1.0, 1.0;

             

            border-color: #C0C0C0;

             

            theme-color: #C0C0C0;

             

            roll-over-color: #d2e1ea;

             

            selection-color: #A6CAE1;

             

            font-size: 11;

            }

             

            I even tried just setting the styleName property in the mxml, but it didn't do anything either.

             

            -Cindy

             

            • 3. Re: ComboBox inheriting button skin - how to override
              Michael Borbor Level 4

              Indeed is very weird could you maybe post a picture of what you see when you run your app? What SDK version are you using?

              • 4. Re: ComboBox inheriting button skin - how to override
                atta707 Level 2

                Try changing the name of the Button select to something like .myButton and set the style of individual buttons. I know, it's going to be difficult but that's the only workaround I can think of.

                • 5. Re: ComboBox inheriting button skin - how to override
                  run,ryan! Level 3

                  As combobox has a downarrowButton which is a Button classs, it will extend the skin you defined for button, you can reset it by

                  ComboBox
                  {
                       up-skin: ClassReference("mx.skins.halo.ComboBoxArrowSkin");
                      over-skin: ClassReference("mx.skins.halo.ComboBoxArrowSkin");
                      down-skin: ClassReference("mx.skins.halo.ComboBoxArrowSkin");
                  

                  another way is not to use type selector in css, just define a class name using your custom button skin and define the class name for each button

                  • 6. Re: ComboBox inheriting button skin - how to override
                    Cindy.Herrman Level 1

                    Thanks !! That is exactly what I was looking for.  We are trying to come up with standard styles for everything and wanted to be able to set the button styles using Button in the css so that it didn't need to have a style name set on every button in the mxml.

                    Thanks for the explanation as well as the sample css.  It helps to know why it was picking up the button style.

                     

                    Thanks,

                     

                    Cindy