2 Replies Latest reply on May 1, 2010 3:28 AM by Rees_R

    modifying default spark panel skin's id=contentGroup not working

    Rees_R

      Hello,

       

      I'm modifying the default "spark.skins.spark.PanelSkin" and then applying this tailored Panel skin to my panel component.  I want to be able to create a left, right, and bottom constraint of 10px to the "contentGroup" --this is all.

       

      However, I am finding this task near impossible.  I'm changing:

       

       

      <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">

                  </s:Group>

       

       

      To:

       

       

      <s:Group id="contentGroup" left="10" right="10" top="10" bottom="10"  width="100%" height="100%" minWidth="0" minHeight="0">

                  </s:Group>

       

       

       

      However, this does NOT work.  Alternatively,  modifying it's "contentGroup"s parent... "contents"... from:

       

      <s:Group id="contents">

       

      To:

       

      <s:Group left="10" right="10" left="10" top="10" bottom="10" id="contents">

       

       

       

       

      does NOT work either.

       

      Can someone please tell me how to make the "contentGroup" have a 10px padding around WITHOUT changing the title bar??  Thanks in advance

        • 1. Re: modifying default spark panel skin's id=contentGroup not working
          Shongrunden Adobe Employee

          I believe your first attempt isn't working because you are defining both a width/height size and top/left/right/bottom constraints (the width/height take precendence)

           

          Your second attempt isn't working because the "contents" Group is in a VerticalLayout which doesn't respect top/left/bottom/right constraints.

           

          EDIT:

           

          Actually setting the left/right/top/bottom on "contents" doesn't have any effect because at the top of the skin file the override of updateDisplayList() sets them to zero.  If you change those two lines from 0 to 10 it should have an effect, but not the one you are looking for.  I suggest this approach:

           

          Try wrapping the contentGroup in another Group that has width/height  of 100% and set the top/left/right/bottom on the contentGroup:

           

                      <!--- @copy spark.components.SkinnableContainer#contentGroup -->
                      <s:Group id="padding" width="100%" height="100%">
                          <s:Group id="contentGroup" top="10" left="10" right="10" bottom="10" minWidth="0" minHeight="0">
                          </s:Group>
                      </s:Group>

           

          Message was edited by: Shongrunden

          • 2. Re: modifying default spark panel skin's id=contentGroup not working
            Rees_R Level 1

            Thanks so much for the help shongrunden!  It works perfectly now, really appreciate it  =)