How to Create a Grid with 1 Pixel Border in Flex

October 13th, 2008 Ntt.cc

Zebra-256x256 I created a Grid to layout my component. I set the borderthickness to 1 pixel in order to get a 1-pixel-border Grid. However, the border looks more thick than my expectation. The borders are 2 pixel wide except the borders around the Grid.

Solution:

I tried many ways to get my 1-pixel-border Grid. For example, I set the left and top borders’ thickness of Grid to 0, the bottom and right borders’ thickness of cell to 0. At last, I got a Grid whoes left and top border is invisible.

Thank God! Casually, I was lighted like a bulb when I saw the “horizontalGap” and “verticalGap” styles of Grid. I set the values of both of them to “-1”. Uh-huh, a 1-pixel-border Grid appeared.

Search-256x256 Demo | DownloadDownload Full Project

How-to-Create-a-Grid-with-1-Pixel-Border-in-Flex-OnePixelBorder

The following is full source code of OnePixelBorder.mxml:

Download: OnePixelBorder.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.     <mx:Style>
  4.         Grid
  5.         {
  6.             horizontal-gap:-1;
  7.             vertical-gap:-1;
  8.         }
  9.         GridItem
  10.         {
  11.             border-color:#000000;
  12.             border-style:solid;
  13.             border-thickness:1;   
  14.         }
  15.     </mx:Style>
  16.     <mx:Grid x="31" y="24">
  17.         <mx:GridRow>
  18.             <mx:GridItem width="100" height="30">
  19.                
  20.             </mx:GridItem>
  21.             <mx:GridItem width="100" height="30">
  22.                
  23.             </mx:GridItem>
  24.             <mx:GridItem width="100" colSpan="2" height="30">
  25.                
  26.             </mx:GridItem>
  27.         </mx:GridRow>
  28.        
  29.         <mx:GridRow>
  30.             <mx:GridItem width="100" height="30">
  31.                
  32.             </mx:GridItem>
  33.             <mx:GridItem width="120" colSpan="2" height="30">
  34.                
  35.             </mx:GridItem>
  36.             <mx:GridItem width="100" colSpan="3" height="11">
  37.                
  38.             </mx:GridItem>
  39.         </mx:GridRow>
  40.        
  41.         <mx:GridRow>
  42.             <mx:GridItem width="100" height="30">
  43.                
  44.             </mx:GridItem>
  45.             <mx:GridItem width="100" height="30">
  46.                
  47.             </mx:GridItem>
  48.             <mx:GridItem width="120" colSpan="3" height="30">
  49.                
  50.             </mx:GridItem>
  51.         </mx:GridRow>
  52.     </mx:Grid>
  53. </mx:Application>

Enjoy!

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
Posted in Flex Tags: , , , 4,192 views
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed

Related Post

« Design Patterns in ActionScript–Factory Method
Design Patterns in ActionScript–Abstract Factory »
You can leave a response, or trackback from your own site.

3 Responses to “How to Create a Grid with 1 Pixel Border in Flex”

  1. robert says:
    October 29, 2008 at 11:52 am

    thanks a lot..

  2. nicole says:
    December 30, 2008 at 3:09 pm

    Great! Thank you~

  3. Erik says:
    January 27, 2009 at 5:39 am

    Thanks! This also works with HBoxes/VBoxes…

Leave a Reply

  • Ads