Using percentage-based children with absolute positioning : Layout « Container « Flex






Using percentage-based children with absolute positioning

Using percentage-based children with absolute positioning
           

<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".

This user guide is licensed for use under the terms of the Creative Commons Attribution 
Non-Commercial 3.0 License. 

This License allows users to copy, distribute, and transmit the user guide for noncommercial 
purposes only so long as 
  (1) proper attribution to Adobe is given as the owner of the user guide; and 
  (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. 
The best way to provide notice is to include the following link. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

-->
<!-- components\PercentSizeAbsPosit.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark">
    <s:layout>
        <s:VerticalLayout gap="25" />
    </s:layout>
    <s:BorderContainer width="200" height="75">
        <s:layout>
            <s:BasicLayout />
        </s:layout>
        <s:BorderContainer x="20" y="10" width="100%" height="25"
            backgroundColor="#666666" />
    </s:BorderContainer>
    <s:BorderContainer width="200" height="75">
        <s:layout>
            <s:BasicLayout />
        </s:layout>
        <s:BorderContainer left="20" top="10" width="100%" height="25"
            backgroundColor="#666666" />
    </s:BorderContainer>
</s:Application>

   
    
    
    
    
    
    
    
    
    
    
  








Related examples in the same category

1.In absolute layout, the container doesn't arranging its childrenIn absolute layout, the container doesn't arranging its children
2.Using a negative value in the x property to hide a component off screenUsing a negative value in the x property to hide a component off screen
3.Positioning a button 5 pixels from the bottom-right corner of a windowPositioning a button 5 pixels from the bottom-right corner of a window
4.Using two constraint columns to align a pair of buttonsUsing two constraint columns to align a pair of buttons
5.Add Label and Button to a Panel with absolute layoutAdd Label and Button to a Panel with absolute layout
6.Places a Button in an Application with an absolute layoutPlaces a Button in an Application with an absolute layout
7.A group container uses the VerticalLayout class to lay out four Button controls.A group container uses the VerticalLayout class to lay out four Button controls.
8.Use typicalLayoutElement property to tell container to use the third button to determine height of all container childrenUse typicalLayoutElement property to tell container to use the third button to determine height of all container children
9.VerticalLayout horizontal AlignVerticalLayout horizontal Align
10.VerticalLayout GroupVerticalLayout Group
11.Position Children by Using Layout ManagementPosition Children by Using Layout Management
12.Use Constraint-Based Layout for ContainersUse Constraint-Based Layout for Containers
13.Create and Control Resizable ContainersCreate and Control Resizable Containers
14.Scroll to a Specific Child in a ContainerScroll to a Specific Child in a Container
15.Remove control from parentRemove control from parent
16.Control the Visibility and Layout of ChildrenControl the Visibility and Layout of Children
17.Set the component sizes to 300 by 40 pixelsSet the component sizes to 300 by 40 pixels
18.Setting container size and its childSetting container size and its child
19.Change percentage values to 50% and 40%, respectivelyChange percentage values to 50% and 40%, respectively
20.Using minimum or maximum dimensionsUsing minimum or maximum dimensions
21.Use minWidth, minHeight, maxWidth, and maxHeight properties with a percentage-based component to constrain its size.Use minWidth, minHeight, maxWidth, and maxHeight properties with a percentage-based component to constrain its size.
22.The rows occupy 80% and 20% of the Canvas container's height from top to bottom, respectively.
23.A single constraint column that occupies 20% of the Canvas width; 80% of the container is unallocated:
24.Define the constraint rows and columns by using percentages.Define the constraint rows and columns by using percentages.
25.Left and right contraintsLeft and right contraints
26.Get childrenGet children
27.Absolute layout controlsAbsolute layout controls
28.Change child indexChange child index
29.Set tab index for controlsSet tab index for controls
30.horizontal layouthorizontal layout
31.Dynamically Change the Child Depth in the LayoutDynamically Change the Child Depth in the Layout