Setting the header height on a Flex Panel container

9 Responses to Setting the header height on a Flex Panel container

1. Alex Grande says:

   January 23, 2008 at 6:46 pm

   Nice site. I’m happy to find it and am finding it useful.

   The change in background color on this reply is nice too.

   One thing I noticed is you are not separating your code. If you are going to teach people flex please teach them to use separate style sheets and follow best practices.

   Thanks again! keep it up!

   Alex

   Reply
2. peterd says:

   January 23, 2008 at 7:42 pm

   Alex,

   No, I typically haven’t been separating code. I have on a few examples if I have a big data set (I may externalize the XML, for example).
   Typically I leave it all in one code block so it is [hopefully] easier for people to copy/paste. Otherwise, they’ll have to right-click on the SWFs, select “View Source” and try and recreate the project piece by piece.

   Peter

   Reply
3. Antonio says:

   October 3, 2008 at 9:28 am

   Hi, I’ve been working with flex for a couple of weeks now and i was looking for some way to put an image in the panel’s header just as you have on your example, i tried the same code

   titleIcon="@Embed('assets/Panel.png')"
   

   with of course the name of my file and the folder where it’s contained (this folder is contained in the main project folder). But it still doesn’t work, is there a specific location where the file must be or am I missing something??

   Reply
4. peterd says:

   October 3, 2008 at 10:47 am

   Antonio,

   That code should work. If you are using Flex Builder 3, you should have the have the PNG file in the /src/assets/ folder, and your MXML file should be in the /src/ file.

   You can download the project source code above and view the directory structure and probably try importing the project into Flex Builder.

   Peter

   Reply
5. Prashant Khanal says:

   November 22, 2008 at 11:47 pm

   Hey Folks,

   I see a dark line between header and body of my panel. I have set the border thickness to be zero from all sides. Is there any way to remove that?

   Reply
6. Ganesh says:

   July 16, 2009 at 4:55 am

   I have a list box inside the panel. I have an requirement to specify the height of the panel as the length of the data source which I gave for the list box.

   Reply
   • Peter deHaan says:

     July 16, 2009 at 8:36 am

     Ganesh,

     I’d try creating a Panel and not specifying a height, that way the Panel container should size based on it’s children’s dimensions. Next, bind the nested List control’s rowCount property to the number of items in the List control’s data provider. That way, the List should always resize itself to the display all of its items (which may or may not look terrible, considering how many items you have in the List dataProvider).

     <?xml version="1.0" encoding="utf-8"?>
     <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
      
         <mx:ApplicationControlBar dock="true">
             <mx:Button label="2 items" click="list.dataProvider = [1,2];" />
             <mx:Button label="4 items" click="list.dataProvider = [1,2,3,4];" />
             <mx:Button label="6 items" click="list.dataProvider = [1,2,3,4,5,6];" />
             <mx:Button label="10 items" click="list.dataProvider = [1,2,3,4,5,6,7,8,9,10];" />
             <mx:Button label="16 items" click="list.dataProvider = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];" />
         </mx:ApplicationControlBar>
      
         <mx:Panel title="Auto sizing Panel">
             <mx:List id="list" width="150" rowCount="{list.dataProvider.length}" />
         </mx:Panel>
      
     </mx:Application>

     Peter

     Reply
7. Mark says:

   July 21, 2009 at 1:00 pm

   Should headerHeight work in Gumbo? It does not for me.
   The titlebar title is pushed down by a gray area’s height on a top is not changed.

   Reply
   • Peter deHaan says:

     July 21, 2009 at 6:23 pm

     Mark,

     It should, but I believe there is currently an open bug on the issue: [SDK-21549] “Halo Panel headerHeight style does not function as expected with Spark Skin”.

     Peter

     Reply