[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

FLEX Issue with VBox height inside panel and scrolling content

Posted on 2010-01-05
11
Medium Priority
?
1,205 Views
Last Modified: 2013-11-11
I have 2 issues
My flex app consist of a panel with 2 VBoxes inside which are created programatically (appendChild)
This panel should take the full height and width of the canvas so that when the SWF is embedded into a web page, its HTML code defines the actual size of the app.

Problem is, it is showing with some margin around.

For the other issue,
One of the VBoxes called main will hold an arbitraty amount of content.
The other has a fixed size of just shows a couple of buttons.

The problem is that the content is enlarging the main VBox and no scrolls bars are shown
I want this VBox (Main) to remain the same size and just show a scroll bar if the content is larger.

So

1. How to have the wrapping extend to the full height and width with no margins
2. How to have the Main Vbox keep the same size regardless of the content and make it display a scroll bar if necessary ?

These VBoxes are dynamically generated
<mx:Panel width="100%" height="100%">
	<mx:VBox height="100%" width="100%" id="main" />
	<mx:VBox height="90" width="100%" id="bottom" />
</mx:Panel>

Open in new window

0
Comment
Question by:chuela
  • 6
  • 4
11 Comments
 
LVL 19

Expert Comment

by:moagrius
ID: 26187781
* i'm in the process of reinstalling flex so i can't test anything out at the moment *

as regards question 1, i think the Panel component probably has some built-in margins to allow display of the dropshadow, borders and whatnot - not sure what can be done about that.

as far as question 2, you should be able to just set the VBox's verticalScrollPolicy to ScrollPolicy.AUTO - that should render scrollbars if they're required.
0
 
LVL 37

Expert Comment

by:zzynx
ID: 26189469
1) Add borderStyle="none":
<mx:Panel width="100%" height="100%" borderStyle="none">

>> 2. How to have the Main Vbox keep the same size regardless of the content
What exactly do you mean?

Same absolute size? Then specify it:
<mx:VBox height="90" width="150" id="main" />
and then let the other one take all available remaining space:
<mx:VBox height="100%" width="100%" id="bottom" />

Same relative size? Like this?
        <mx:VBox height="25%" width="100%" id="main" />
        <mx:VBox height="75%" width="100%" id="bottom" />
0
 
LVL 37

Expert Comment

by:zzynx
ID: 26189662
2. Maybe you mean something like this:

The upper VBox doesn't become higher than 300 px.
If "more" buttons are added you get a scrollbar.
<mx:Panel width="100%" height="100%" borderStyle="none">
        <mx:VBox backgroundColor="red" maxHeight="300" width="100%" id="main" borderStyle="none" verticalScrollPolicy="auto">
             <mx:Button label="Label 1"/>
             <mx:Button label="Label 2"/>
             <mx:Button label="Label 3"/>
             <mx:Button label="Label 4"/>
             <mx:Button label="Label 5"/>
             <mx:Button label="Label 6"/>
             <mx:Button label="Label 7"/>
             <mx:Button label="Label 8"/>
             <mx:Button label="Label 9"/>
             <mx:Button label="Label 10"/>
             <mx:Button label="Label 11"/>
             <mx:Button label="Label 12"/>
             <mx:Button label="Label 13"/>
             <mx:Button label="Label 14"/>
             <mx:Button label="Label 15"/>
             <mx:Button label="Label 16"/>
        </mx:VBox>
        <mx:VBox backgroundColor="green" height="75%" width="100%" id="bottom" />
</mx:Panel>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:chuela
ID: 26190132
borderStyle is not making it (see attached image)
As for the height, I don't know a maxHeight. Only the bottom section has a predefined height


flexmargin.gif
0
 
LVL 37

Expert Comment

by:zzynx
ID: 26193643
>> borderStyle is not making it (see attached image)
For me it does.
The image you show doesn't correspond with the simple code you posted.
So, please post the code corresponding with the image.

>> As for the height, I don't know a maxHeight.
How does that fit with
>> I want this VBox (Main) to remain the same size
What size?
0
 

Author Comment

by:chuela
ID: 26194572
Zzynx, It doesn't
Here it is with your code (same margin issue)
Vbox will remain 90 pixels height

ee.gif
0
 
LVL 37

Accepted Solution

by:
zzynx earned 2000 total points
ID: 26195029
Oh, you mean that one:

add
paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0"
to your Application:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0" >
0
 

Author Closing Comment

by:chuela
ID: 31673025
Perfect!
0
 
LVL 37

Expert Comment

by:zzynx
ID: 26195107
>> Vbox will remain 90 pixels height
Problem is, you can't have a scrollbar appear without using maxHeight for the other (upper) VBox.
But maxHeight can't be used together with a percentual value.
So...
0
 
LVL 37

Expert Comment

by:zzynx
ID: 26195118
Thanx 4 axxepting
0
 

Author Comment

by:chuela
ID: 26195229
minHeight is working
And by setting it to 0, it does the trick
Weird thing in Flex

Thank You
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is primarily concerned with ActionScript 3 and generally specific to AVM2.  Most suggestions would apply to ActionScript 2 as well, and I've noted those tips that differ between AS2 and AS3. With the advent of ActionS…
I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question