9 Replies Latest reply on Feb 27, 2008 6:53 AM by Starlover_jacob

    vbox strange behavior in alignment

    Starlover_jacob Level 1
      Hi there, i have a strange problem with a vbox and an image i load into it..
      the image i load is bigger than i want to show it, so i set the width to lets say 80 and the image is shown smaller.
      i should think wow thats very nice, but the hbox underneath the image must stand right under the image.. and thats not the case.. Does anyone know how to solve this problem?

      code:


      <mx:VBox label="Features" width="100%" verticalGap="0">
      <mx:Label text="titel" fontSize="11" fontWeight="bold"/>
      <mx:Image id="img" width="80" source="assets/image.png" verticalAlign="top"/>
      <mx:HBox width="100%" borderStyle="solid" borderColor="#0096FF" verticalAlign="top">
      <mx:VBox id="descr" width="100%" verticalGap="0" borderStyle="solid" borderColor="#000000">
      <mx:Text text="featureStrin"/>
      <mx:Label text="highlight" color="#EE8D0C"/>
      <mx:Label text="highlight" color="#EE8D0C"/>
      <mx:Label text="productprice" fontWeight="bold"/>
      </mx:VBox>
      <mx:VBox>
      <mx:Label text="productprice" fontWeight="bold"/>
      </mx:VBox>
      </mx:HBox>
      <mx:Text width="100%" id="descriptionText" text="product description"/>
      </mx:VBox>
        • 1. Re: vbox strange behavior in alignment
          jylaxx Level 1
          It seams that you have to set both width AND height.
          • 2. Re: vbox strange behavior in alignment
            Starlover_jacob Level 1
            hmm yes i see now.. i have to set both width and height of my image.. then the text is put right underneath the image.. without any spacing.. a bit weird this behavior.

            how do i solve this when i don't know the proportions of the image.. and i just want to set the max width.
            the image itself scales perfectly.. but i am stuck with that spacing it creates..
            • 3. Re: vbox strange behavior in alignment
              jylaxx Level 1
              one suggestion :
              - set Scale content property of the image to false
              - add a listener for the image.creationComplete event
              - in the listener add this code :
              private function imageCreationComplete() : void
              {
              if ( ( ! image.scaleContent ) && ( image.width > image.parent.width ) )
              {
              var r : Number = image.parent.width / img.width ;
              img.width = image.parent.width ;
              img.height = img.height * r ;
              }
              }
              • 4. Re: vbox strange behavior in alignment
                jylaxx Level 1
                Sorry for the typos (mixed image and img)...

                private function imgCreationComplete() : void
                {
                if ( ( ! img.scaleContent ) && ( img.width > img.parent.width ) )
                {
                var r : Number = img.parent.width / img.width ;
                img.width = img.parent.width ;
                img.height *= r ;
                }
                }


                • 5. Re: vbox strange behavior in alignment
                  Starlover_jacob Level 1
                  euh.. do you have a complete working version?

                  you say ! img.scaleContent , but img.scalecontent is always true or false.. and not empty? or do you say this way that scalecontent is false..

                  what i did is at the creationcomplete i call the function.. but it never runs trough the if statement..
                  second.. the img.width is empty (0) at that point.. so it is never bigger than the parent.width.
                  :(
                  whelp
                  • 6. Re: vbox strange behavior in alignment
                    jylaxx Level 1
                    Well I said : first set the scale content property to false (in the ide)
                    The if ( ! img.scaleContent ) is just to check if it has be set, so we don't do anything if scaling has been already done.

                    May be the creationComplete is not the right event for you. It depends how you load the image.

                    In debug mode set some traces to detect when you have the right information about your image size.
                    • 7. Re: vbox strange behavior in alignment
                      m_hartnett Level 3
                      This code comes from a render for a datagrid but can be adapted for anything. It is esentially the same as jylaxx provided above. The rectangle method is called and the 'this' in the getRect method is referring to the image that is within the grid. You can change it to the application or the container holding the image. I use it only to get the width and height of the image.

                      public function loadDone(e:Event ) : void {
                      var r : Rectangle = imgItem.getRect(this);
                      if(r.width > 35 || r.height > 35) {
                      var pct : Number;
                      if(r.width - 35 < r.height - 35)
                      pct = (35) / r.height;
                      else
                      pct = (35) / r.width;
                      imgItem.height = r.height * pct;
                      imgItem.width = r.width * pct;
                      }
                      }

                      Here is the image mxml. The event listener is on the complete event.

                      <mx:Image id="imgItem" x="0" y="0"
                      scaleContent="true"
                      useHandCursor="true"
                      buttonMode="true"
                      complete="loadDone(event)"/>

                      • 8. Re: vbox strange behavior in alignment
                        jylaxx Level 1
                        That's it : use complete event and not creationComplete.
                        Sorry
                        • 9. vbox strange behavior in alignment
                          Starlover_jacob Level 1
                          yess that did the trick for me, thanx a lot guys

                          working example:


                          <mx:Script>
                          <![CDATA[
                          public function loadDone(e:Event) : void
                          {
                          var r :Rectangle = myimg.getRect(myimg);
                          var imagewidth:Number=r.width;
                          var imageheight:Number=r.height;
                          var parentwidth:Number=myimg.parent.width;

                          if(r.width > myimg.parent.width || r.height > myimg.parent.height)
                          {
                          if(r.width<myimg.parent.width)
                          {
                          myimg.width=r.width;
                          myimg.height=r.height;
                          }
                          else
                          {
                          var pct : Number = myimg.parent.width / r.width ;
                          myimg.width = myimg.parent.width ;
                          myimg.height= r.height*pct ;
                          }

                          }
                          else
                          {
                          myimg.width=r.width;
                          myimg.height=r.height;
                          }
                          }
                          ]]>
                          </mx:Script>


                          <mx:VBox verticalGap="0">
                          <mx:Canvas width="620">
                          <mx:Label text="titel" fontSize="11" fontWeight="bold"/>
                          <mx:Image complete="loadDone(event)" id="myimg" source="assets/image.png" verticalAlign="top" scaleContent="true"/>
                          </mx:Canvas>
                          <mx:VBox label="Features" verticalGap="0" borderStyle="solid" height="278">
                          <mx:HBox borderStyle="solid" borderColor="#0096FF" verticalAlign="top">
                          <mx:VBox id="descr" verticalGap="0" borderStyle="solid" borderColor="#000000">
                          <mx:Text text="featureStrin"/>
                          <mx:Label text="highlight" color="#EE8D0C"/>
                          <mx:Label text="highlight" color="#EE8D0C"/>
                          <mx:Label text="productprice" fontWeight="bold"/>
                          </mx:VBox>
                          <mx:VBox>
                          <mx:Label text="productprice" fontWeight="bold"/>
                          </mx:VBox>
                          </mx:HBox>
                          <mx:Text id="descriptionText" text="product description"/>
                          </mx:VBox>
                          </mx:VBox>