resize container

I have a DragPanel, and.... inside I have 1. Vbox

1.1. Hbox

1.1.1 Spacer

1.1.2 Image

1.1.3 Image

1.2. Label

I need to obtain this graphic:

----------

|            |

|            |

|  ºººººº  |

|º         º|

|º         º|

|º         º|

|  ºººººº  |

|            |

----------

But I get this:

----------

|            |

|            |

|            |

|            |

|            |

|            |

|  ºººººº  |

|º         º|

|º         º|

|º         º|

|  ºººººº  |

|            |

|            |

|            |

|            |

|            |

----------

HELP ME PLEASE!!!!

This is my code:

<mx:Script>
    <![CDATA[
        import mx.managers.DragManager;
        import mx.core.DragSource;
        import mx.events.DragEvent;
        import flash.events.MouseEvent;
        import mx.containers.Canvas;
        import mx.containers.Panel;
        import myComponents.DragPanel;
        import mx.controls.Image;


        [Embed("images/circulo.png")]
        private var imagen1:Class;

        [Embed("images/circulo.png")]
        private var imagen2:Class;

        private var original:BitmapData;
        private static const MY_WIDTH:uint = 342;
        private static var MY_HEIGHT:uint = 336;

        // Define static constant for event type.
        public static const RESIZE_CLICK:String = "resizeClick";

        private function setResize():void
        {
            dp1.title = "CanvasDD: " + dp1.width + ", " + dp1.height;
        }

// // D&D event handlers. //

        // Creation complete handler for each panel to add the 
        // mouseMove event handler to the title bar. 
        // Clicking the mouse button, then moving the mouse on the title bar
        // initiates the d&d operation. 
        private function myPanelCCHandler(event:Event):void 
        {
            event.currentTarget.myTitleBar.addEventListener(MouseEvent.MOUSE_DOWN, tbMouseMoveHandler);
        }

        // Variables used to hold the mouse pointer's location in the title bar.
        // Since the mouse pointer can be anywhere in the title bar, you have to 
        // compensate for it when you drop the panel. 
        public var xOff:Number;
        public var yOff:Number;

        // Function called by the canvas dragEnter event; enables dropping
        private function doDragEnter(event:DragEvent):void 
        {
            DragManager.acceptDragDrop(Canvas(event.target));
        }

        // Drag initiator event handler for
        // the title bar's mouseMove event.
        private function tbMouseMoveHandler(event:MouseEvent):void 
        {
            var dragInitiator:Panel=Panel(event.currentTarget.parent);
            var ds:DragSource = new DragSource();
            ds.addData(event.currentTarget.parent, 'panel'); 

            // Update the xOff and yOff variables to show the
            // current mouse location in the Panel.  
            xOff = event.currentTarget.mouseX;
            yOff = event.currentTarget.mouseY;

            // Initiate d&d. 
            DragManager.doDrag(dragInitiator, ds, event);                    
        }            

        // Function called by the Canvas dragDrop event; 
        // Sets the panel's position, 
        // "dropping" it in its new location.
        private function doDragDrop(event:DragEvent):void 
        {
            // Compensate for the mouse pointer's location in the title bar.
            var tempX:int = event.currentTarget.mouseX - xOff;
            event.dragInitiator.x = tempX;

            var tempY:int = event.currentTarget.mouseY - yOff;
            event.dragInitiator.y = tempY;

            // Put the dragged panel on top of all other components.
            v1.setChildIndex(Panel(event.dragInitiator), v1.numChildren-1);         
        }

// // Resizing event handlers. //

        // Save panel being resized.
        protected var resizingPanel:Panel;
        // Global coordinates of lower left corner of panel.
        protected var initX:Number;
        protected var initY:Number;

        // Resize area of panel clicked.
        protected function resizeHandler(event:MouseEvent):void
        {
            resizingPanel = Panel(event.target);
            initX = event.localX;
            initY = event.localY;

            // Place the rubber band over the panel. 
            rbComp.x = event.target.x;
            rbComp.y = event.target.y;
            rbComp.height = event.target.height;
            rbComp.width = event.target.width;

            // Make sure rubber band is on top of all other components.
            v1.setChildIndex(rbComp, v1.numChildren-1);
            rbComp.visible=true;

            // Add event handlers so that the SystemManager handles 
            // the mouseMove and mouseUp events. 
            // Set useCapure flag to true to handle these events 
            // during the capture phase so no other component tries to handle them.
            systemManager.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, true);
            systemManager.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true);
        }

        // Resizes the rubber band as the user moves the cursor 
        // with the mouse key down.
        protected function mouseMoveHandler(event:MouseEvent):void
        {
                event.stopImmediatePropagation();       

                rbComp.height = rbComp.height + event.stageY - initY;  
                rbComp.width = rbComp.width + event.stageX - initX;

                initX = event.stageX;
                initY = event.stageY;                       
        }

        // Sizes the panel to the size of the rubber band when the 
        // user releases the mouse key. 
        // Also removes the event handlers from the SystemManager.
        protected function mouseUpHandler(event:MouseEvent):void
        {
            event.stopImmediatePropagation();       

            // Use a minimum panel size of 150 x 50.
            if (rbComp.height <= 50)
            {
                resizingPanel.height = 50;  
            }
            else
            {
                resizingPanel.height = rbComp.height;               
            }               

            if (rbComp.width <= 150)
            {
                resizingPanel.width = 150;              
            }
            else
            {
                resizingPanel.width = rbComp.width;             
            }               

            // Put the resized panel on top of all other components.
            v1.setChildIndex(resizingPanel, v1.numChildren-1);

            // Hide the rubber band until next time.
            rbComp.x = 0;
            rbComp.y = 0;
            rbComp.height = 0;
            rbComp.width = 0;
            rbComp.visible = false;

            systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, true);
         开发者_Go百科   systemManager.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true );
        }

        private function handleImageComplete(event: Event): void 
        {
            var bitmap: Bitmap = ((event.target as Image).content as Bitmap);
            if (bitmap != null) 
            {
                bitmap.smoothing = true;
            }
        }

        // Creation complete event handler adds the resizing event. 
        // resizeButtonClicked is a custom event type for this application.
        protected function creationCompleteHandler():void
        {
            addEventListener(RESIZE_CLICK, resizeHandler);
            setResize();
        }

    ]]>
</mx:Script>

<!-- The Canvas is the drag target --> 
<mx:Canvas id="v1" 
    width="500" height="500"  
    borderStyle="solid" 
    backgroundColor="#DDDDDD"
    dragEnter="doDragEnter(event);" 
    dragDrop="doDragDrop(event);">

<myComp:DragPanel  id="dp1" title="Drag Panel 1"
    paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"
    x="19" y="10"
    horizontalAlign="center" verticalAlign="middle"
    width="30%"
    height="100%"
    resize="setResize()"
    creationComplete="myPanelCCHandler(event);">

    <mx:VBox id="vbox" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
        <mx:HBox id="hbox" width="100%" height="100%" borderStyle="solid" borderColor="0x000000" backgroundColor="green">
            <mx:Spacer width="15"/>
            <mx:Image id="img"
                width="100%" height="100%"
                scaleContent="true"
                horizontalAlign="center" verticalAlign="middle"     
                source="{imagen1}"/>
             <mx:Image id="select" source="{imagen2}" width="15" height="15" verticalAlign="top" horizontalAlign="right"/>
        </mx:HBox>          
        <mx:Label text="circle"/>       
    </mx:VBox>


</myComp:DragPanel>

<myComp:RubberBandComp id="rbComp" x="0" y="0" height="0" width="0" visible="false"/>

</mx:Canvas>

---

The height of your DragPanel is set to 100%, which will cause it to fill the Canvas vertically. Though I don't quite understand what you're trying to do, that seems to be your problem.