6 Replies Latest reply on Dec 14, 2007 9:35 AM by markh

    Styling a container

    markh
      I have a VBox that is set as a popup for a popup button. I'm trying to give the container a background colour so you can see it's content when it pop's up over other stuff, I've set it's styleName but nothing seems to change it's appearance:

      .details{
      border-thickness:1;
      background-color:white;
      }
        • 1. Re: Styling a container
          m_hartnett Level 3
          Add this to your css
          backgroundAlpha:1;

          • 2. Re: Styling a container
            markh Level 1
            quote:

            Add this to your css
            backgroundAlpha:1;


            Doesn't seem to make any difference. I definetly have the styleName set to "details"
            • 3. Re: Styling a container
              m_hartnett Level 3
              Is the VBox displaying with a transparent background?

              How are you creating the VBox as the popup.
              Is it defined through actionscript or did you create an MXML component.
              Do you have components inside the box.

              If you built it through AS and no components have been added then make sure the width and height are set on the VBox otherwise it will not show.

              Post some code if none of this works

              • 4. Styling a container
                markh Level 1
                quote:

                Is the VBox displaying with a transparent background?


                Yes

                quote:

                Is it defined through actionscript or did you create an MXML component.


                Actionscript

                quote:

                Do you have components inside the box.


                Yes

                I've nested the VBox in another VBox and styled the inner one, which seems to work but a bit messy, though there are some styles that still don't work like drop-shadow-enabled and rounded-bottom-corners.

                Below is my original code (underscores added cos indentation doesn't show up in these forums):

                var detailsBtn:PopUpButton=new PopUpButton();
                detailsBtn.label="Details";
                detailsBtn.openAlways=true;
                var detailsCont:VBox=new VBox();
                detailsCont.styleName="details";
                for (var i:int=0;i<details.field.length();i++){
                __var field:XML=details.field ;
                __var rowCont:HBox=new HBox();
                __var labelLbl:Label=new Label();
                __labelLbl.text=field.@label;
                __labelLbl.width=130;
                __labelLbl.styleName="detailsLabel";
                __rowCont.addChild(labelLbl);

                __var valueTxt:Text=new Text();
                __valueTxt.text=field.@value;
                __valueTxt.width=200;
                __valueTxt.styleName="detailsValue";
                __rowCont.addChild(valueTxt);

                __detailsCont.addChild(rowCont);
                }
                detailsBtn.popUp=detailsCont;
                container.addChild(detailsBtn);
                • 5. Re: Styling a container
                  m_hartnett Level 3
                  markh,

                  I ran this code and added the label only in the loop and it styled as it should. I changed it to all different colors.

                  The shadow seems to have a problem. I can see it for a split second as the VB is showing but then it disappears.

                  Only other thing I can think of is the style tag.
                  <mx:Style source="css/common.css"/>
                  • 6. Re: Styling a container
                    markh Level 1
                    Thanks for your help. There seems to be something weird going on though I am using Flex 3 Beta, not sure if that's got anything to do with it.

                    I've come up with 2 workarounds - nest the container in another container and style the inner container or apply the styles to the container using setStyle().