5 Replies Latest reply on Nov 5, 2009 7:02 AM by rgadiparthi

    Flex application has padding I can't remove

    ABFoxEF Level 1

      I've tried searching for this both in google and these forums and I'm baffled by what looks to be padding showing up on the right and bottom of my flex application. For the life of me I can't get it to go away.

       

      This occured in a project I was working on, and below is a picture of another app I created from scratch to test. The maroon part is the application, the gray/blue is the default flex background that won't go away. It extends beyond the 200x200 that I've defined for the application.

       

      flexPadding.png

       

      The code for this is pretty straight forward. I would love to know what I can add or remove from this to get rid of that extra bit of background:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application
           xmlns:mx="http://www.adobe.com/2006/mxml"
           layout="vertical"
           width="200" height="200"
           paddingBottom="0"
           paddingTop="0"
           paddingLeft="0"
           paddingRight="0"
           horizontalGap="0"
           verticalGap="0">
          <mx:Canvas width="200" height="200" backgroundColor="#7D4242">
             
          </mx:Canvas>
      </mx:Application>

        • 1. Re: Flex application has padding I can't remove
          Matt Le Fevre Level 4
          <mx:Application
               xmlns:mx="http://www.adobe.com/2006/mxml"
               layout="absolute"
               width="200" height="200"
               paddingBottom="0"
               paddingTop="0"
               paddingLeft="0"
               paddingRight="0"
               horizontalGap="0"
               verticalGap="0">
              <mx:Canvas width="200" height="200" backgroundColor="#7D4242">
                 
              </mx:Canvas>
          </mx:Application>

           

          make that change, should resolve the issue

           

          you could also then set the dimensions of the canvas to 100% for height/width to ensure there is no chance of any padding

          • 2. Re: Flex application has padding I can't remove
            ABFoxEF Level 1

            Updated (See new code below). Still producing the same rendered output as the original.

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application
                 xmlns:mx="http://www.adobe.com/2006/mxml"
                 layout="absolute"
                 width="200" height="200"
                 paddingBottom="0"
                 paddingTop="0"
                 paddingLeft="0"
                 paddingRight="0"
                 horizontalGap="0"
                 verticalGap="0">
                <mx:Canvas width="100%" height="100%" backgroundColor="#7D4242">
                   
                </mx:Canvas>
            </mx:Application>

            • 3. Re: Flex application has padding I can't remove
              Matt Le Fevre Level 4

              Really?

               

              i currently have

               

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="200">
                  <mx:Canvas width="100%" height="100%" backgroundColor="red"/>
              </mx:Application>
              

               

              and it gives me (see attached image)

               

              make sure you delete your cache/refresh the builder design view etc..

              • 4. Re: Flex application has padding I can't remove
                ABFoxEF Level 1

                When I preview it in Flex Builder it looks fine for me too, it's only when previewing it in browser that it does this.In fact, after more testing, it appears that this ONLY happens in IE8 (compatability mode both on and off) on my Windows 7 machine. I looks fine in IE/FF/Chrome on my Vista machine, and FF/Chrome/Opera/Safari on the Win7 machine.

                 

                As a note: the extra backtground the actual application scales with the size of the application.

                 

                I tried uninstalling/reinstalling flash and clearing IE's cache. I didn't seem to be able to run IE in compatability mode. I'm not sure what might be causing this, but at this point I'd guess the code is probably not the issue.

                • 5. Re: Flex application has padding I can't remove
                  rgadiparthi Level 2

                  your code works fine in my machine

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application
                       xmlns:mx="http://www.adobe.com/2006/mxml"
                       layout="absolute"
                       width="200" height="200"
                       paddingBottom="0"
                       paddingTop="0"
                       paddingLeft="0"
                       paddingRight="0"
                       horizontalGap="0"
                       verticalGap="0">
                      <mx:Canvas width="100%" height="100%" backgroundColor="#7D4242">
                        
                      </mx:Canvas>
                  </mx:Application>

                   

                  check if you have any css, that has padding.