1 Reply Latest reply on Aug 10, 2010 5:08 PM by laxmidi

    Problem Rounding Corners in Flex 3

    laxmidi Level 1

      Hi,

       

      I'm having some problems rounding my panel and controlbar.

       

      Actually, the corners are rounded. The problem is that at the bottom of the panel are light gray squares peeking out from behind the rounded corners. If I put a dropshadow on the panel then, only one of the corners has the light gray square problem.

       

       

      I simplified the code a lot. But, it should show what I'm trying to do.

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Panel 
           xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
           width="500"
           height="400"
           styleName="myPanelstyles"  >
                                    
                            
               <mx:Accordion id="myAccordion"
                            resizeToContent="true"
                            width="100%">
                                  <mx:VBox
                                    id="myStats"
                                     width="100%"
                                     height="316"
                                     paddingTop="15">
                                          <mx:DataGrid  id="myGrid"   
                                               width="100%"               
                                              headerHeight="40">
                                                   <mx:columns>
                                                           <mx:DataGridColumn />     
                                                           <mx:DataGridColumn />                                           
                                                           <mx:DataGridColumn />
                                                           <mx:DataGridColumn />
                                                          
                                                   </mx:columns>
                                         </mx:DataGrid>
                                    </mx:VBox> 
                                 
                                  <mx:VBox label="Details"
                                          width="100%"
                                          height="319"
                                          paddingTop="20">                   
                                                               
                                  </mx:VBox>
                         </mx:Accordion>   
      
                <mx:ControlBar height="40"  width="100%" barColor="0xCCCCCC"  >
                     <mx:Button x="20" y="400" />
                </mx:ControlBar>
      </mx:Panel>
      

       

       

       

       

      .myPanelstyles {
      
         borderColor: #aaaaaa;
         borderAlpha: 1;
         borderThicknessLeft: 2;
         borderThicknessTop: 0;
         borderThicknessBottom: 0;
         borderThicknessRight: 2;
         roundedBottomCorners: true;
         cornerRadius: 8;
         headerHeight: 40;
         headerColors:  #575757, #0d0d0d;
         footerColors: #575757, #000000;
         shadowDirection: left;
         titleStyleName: "white4";
         fontsize: 15;
      }
      

       

      I've read that sometimes there are problems rounding a panel that has a border. I tried setting the border to solid and thickness to zero and it's still not working correctly.

       

      Any ideas as to how to solve this problem?

       

      Thank you.

       

      -Laxmidi

        • 1. Re: Problem Rounding Corners in Flex 3
          laxmidi Level 1

          Okay, I figured out the cause of the problem.

           

          The component is in a ViewStack and the edges of the ViewStack are peeking out. I set the backgroundColor of the ViewStack to red and that's how I determined the cause of the problem. I set the viewStack's width to 100% and that solved it.