This should do the trick <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; verticalGap="0" paddingTop="0" paddingBottom="0" width="600" height="600"> <mx:Panel height="75%"> <mx:Text text="This panel should take up 75% of the application's height" /> </mx:Panel> <mx:Panel id="my25panel" height="25%" layout="absolute" title="{100/(this.height/my25panel.height)}"> <mx:Accordion> <mx:Form> <mx:Text text="Item 1" /> <mx:Text text="Item 2" /> <mx:Text text="Item 3" /> <mx:Text text="Item 4" /> </mx:Form> <mx:Form> <mx:Text text="Item 1" /> <mx:Text text="Item 2" /> <mx:Text text="Item 3" /> <mx:Text text="Item 4" /> </mx:Form> <mx:Form> <mx:Text text="Item 1" /> <mx:Text text="Item 2" /> <mx:Text text="Item 3" /> <mx:Text text="Item 4" /> </mx:Form> <mx:Form> <mx:Text text="etc" /> </mx:Form> </mx:Accordion> </mx:Panel> </mx:Application>
Or you could always try something like this <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" verticalGap="0" paddingTop="0" paddingBottom="0" height="600" > <mx:Script> <![CDATA[ import mx.events.FlexEvent; private function setHeight(e:FlexEvent,number:Number):void { e.target.height = (this.height*number) } ]]> </mx:Script> <mx:Panel creationComplete="setHeight(event,0.75)" width="100%"> <mx:Text text="This panel should take up 75% of the application's height" /> </mx:Panel> <mx:Panel id="mlo" width="100%" title="{100/(this.height/mlo.height)}" creationComplete="setHeight(event,0.25)"> <mx:Accordion > <mx:Form > <mx:Text text="Item 1" /> <mx:Text text="Item 2" /> <mx:Text text="Item 3" /> <mx:Text text="Item 4" /> </mx:Form> <mx:Form > <mx:Text text="Item 1" /> <mx:Text text="Item 2" /> <mx:Text text="Item 3" /> <mx:Text text="Item 4" /> </mx:Form> <mx:Form > <mx:Text text="Item 1" /> <mx:Text text="Item 2" /> <mx:Text text="Item 3" /> <mx:Text text="Item 4" /> </mx:Form> <mx:Form > <mx:Text text="Item 1" /> <mx:Text text="Item 2" /> <mx:Text text="Item 3" /> <mx:Text text="Item 4" /> </mx:Form> <mx:Form > <mx:Text text="etc" /> </mx:Form> </mx:Accordion> </mx:Panel> </mx:Application> --- In [email protected], "Tracy Spratt" <tspr...@...> wrote: > > Well, first, you are specifying that the two panels take up a total of > 100% of the app height, so what you describe is what you are asking for. > > > > You can use an expression in binding braces. Try this, see if it does > what you want: > > <mx:Panel height="{this.height/4}"> > > > > Tracy Spratt > Lariat Services > > Flex development bandwidth available > > ________________________________ > > From: [email protected] [mailto:[email protected]] On > Behalf Of Keith Hughitt > Sent: Friday, February 20, 2009 11:37 AM > To: [email protected] > Subject: [flexcoders] Relative Layout Question > > > > Hi all, > > I have a question about using creative relatively-sized layouts: > > The default behavior > <http://livedocs.adobe.com/flex/3/langref/mx/containers/Panel.html> > of many containers is to use adopt a height just large enough to fit all > of it's children content. Manually specifying a relative height (e.g. > 25%) for the container will work, but only if the content is small > enough. Otherwise the height is increased to fit the content. > > e.g. > > <?xml version="1.0" encoding="utf-8"?> > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; > layout="vertical" width="600" height="600"> > <mx:Panel height="75%"> > <mx:Text text="This panel should take up 75% of the > application's height" /> > </mx:Panel> > <mx:Panel height="25%"> > <mx:Accordion> > <mx:Form> > <mx:Text text="Item 1" /> > <mx:Text text="Item 2" /> > <mx:Text text="Item 3" /> > <mx:Text text="Item 4" /> > </mx:Form> > <mx:Form> > <mx:Text text="etc" /> > </mx:Form> > </mx:Accordion> > </mx:Panel> > </mx:Application> > > Instead of taking up 25% of the application height the bottom panel will > expand to fit the accordion (which in turn has a height equal to the > amount of space used up by it's larged child). > > Is there anyway I can force the panel to only expand to 25% of the main > application's height? I can set an absolute height the panel's children > which will assure a maximum height, but I would like to be able to use a > relative height. > > Any ideas? Any suggestions would be greatly appreciated. > > Thanks! > Keith >
