0 Replies Latest reply on Oct 10, 2009 8:36 PM by christie_sorenson

    Accordion Help Needed

    christie_sorenson

      Hi,

       

      I'm fairly new to flex and not a great graphic designer.  I have a mock up that I'm trying to emulate and I'm having a difficult time with the Accordion.

       

      Basically, when a pane is opened, I need a single border around the header and content area without a diving line between the two.  I can get rid of the top border of content by setting the borderSides, but I can't seem to get rid of the bottom line of the header.  Also, the lines don't exactly match up.  I'll include the images of the mockup and the actual.  There are other differences, but the only two that matter are how the borders don't match up and how to get rid of the bottom border of the header.

       

      Here is my relevant code.  It's a hodgepodge of info I've found.  I'm using flexlib, but I don't have to.

       

      MXML

      ------------------------------------------------------------------------------------------ ---

      <mx:Accordion id="configAccordion" width="100%" resizeToContent="true" >
                     
                      <mx:VBox label="General" styleName="accordionContent" width="100%">

      .......

                     </mx:VBox>

      </mx:Accordion>

       

       

      .AS

      ------------------------------------------------------------------------------------------ ----

      public function accordionChanged(e:IndexChangedEvent):void{
                  var oldHeader:Button = configAccordion.getHeaderAt(e.oldIndex);
                  oldHeader.setStyle("icon",BulletClosed);
                  oldHeader.setStyle("color", "#ffffff");
                  oldHeader.setStyle("cornerRadii", [10, 10, 10, 10]);
                 
                  var newHeader:Button = configAccordion.getHeaderAt(e.newIndex);
                  newHeader.setStyle("icon",BulletOpened);
                  newHeader.setStyle("color", "#00bbf1");
                  newHeader.setStyle("cornerRadii", [10, 10, 0, 0]);

      }

       

       

       

      Styles

      ------------------------------------------------------------------------------------------ ----

       

      Accordion {
          vertical-gap: 3;
          background-alpha:0;
          borderStyle:none;
          header-style-name: gradientHeader;
          backgroundColor:#012f3e;
          borderColor:#ff0000;
          borderThickness:0;
          headerHeight: 25;
      }
             
      .gradientHeader {
          upSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
          overSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
          downSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
          disabledSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
          selectedUpSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
          selectedOverSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
          selectedDownSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
          selectedDisabledSkin:ClassReference('flexlib.skins.EnhancedButtonSkin');
          font-family:Arial;
          cornerRadii: 10, 10, 10, 10;
          borderColors: #00baf0, #00baf0;
          overBorderColors: #00baf0, #00baf0;
          selectedBorderColors: #00baf0, #00baf0;
          borderThickness: 2;
          borderAlpha: 1;
          fillColors: #00B7EB, #0282A8;
          fillAlphas: 1, 1;
          fillColorRatios: 0, 255;
          overFillColors: #00B7EB, #0282A8;
          overFillAlphas: 1, 1;
          overFillColorRatios: 0, 169;
          selectedFillColors: #012f3e, #012f3e;
          selectedFillAlphas: 1,1;
          selectedFillColorRatios: 0, 255;
         
          color:#ffffff;
          textRollOverColor: #ffffff;
          fontSize:14px;
          fontFace:Arial;
          paddingLeft:5;
      }

       

      .accordionContent{
          color:#becdd2;
         
          corner-radius:10;
          borderColor:#00baf0;
          borderThickness:2;
          border-style:solid;
                 
          background-color:#012f3e;
          paddingTop:10;
          paddingBottom:10;
          paddingLeft:5;
          paddingRight:5;
          borderSides:"right left bottom";
         
      }