1 Reply Latest reply on Feb 20, 2008 11:45 AM by jfillman

    Spanning columns in a grid messes up column widths

    Dustin_C
      Hi. I've been struggling with some layout issues when using column width percentages with the Flex Grid control. It seems that if I add a column that spans 2 or more columns, the column widths of the entire grid are altered. The strange thing is that the column widths are changed only if the text in the colspan column exceeds the width of the text in cells above or below it. Please see the code sample at the bottom of this message for a demonstration (I can't seem to find a way to "attach code").

      Does anyone have any ideas how to fix this?

      Thanks!

      Dustin


      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init()" layout="vertical">
      <mx:Script>
      <![CDATA[
      import mx.containers.*;
      import mx.controls.*;
      import mx.core.*;
      import flash.utils.Timer;
      import flash.events.TimerEvent;

      private var dynamicText:Text;
      private var charCode:uint;
      private var button:Button;

      private function init():void
      {
      var panel:Panel = createPanel();
      addChild(panel);
      addText(panel);
      addGrid(panel);
      addButton(panel);
      startTimer();
      }

      private function timerComplete(event:TimerEvent):void
      {
      button.enabled = true;
      }

      private function createPanel():Panel
      {
      var panel:Panel = new Panel();
      panel.title = "ColSpan Spacing Problem";
      panel.width = 500;
      panel.height = 200;
      panel.horizontalScrollPolicy = ScrollPolicy.OFF;
      panel.layout = "vertical";

      return panel;
      }

      private function addText(panel:Panel):void
      {
      var text:Text = new Text();

      text.text = "First row contains 5 columns with no col spans. Second row contains 4 columns with " +
      "column 2 spanning columns 2 and 3. Notice how the column widths are affected when the text " +
      "in the colspan cell grows larger than the text in the cell above it.";
      text.percentWidth = 100;

      panel.addChild(text);
      }

      private function addGrid(panel:Panel):void
      {
      var grid:Grid = new Grid();
      grid.setStyle("horizontalGap", "0");
      grid.setStyle("verticalGap", "0");
      grid.percentWidth = 100;
      panel.addChild(grid);

      // FIRST ROW

      var gridRow:GridRow = new GridRow();
      gridRow.percentWidth = 100;
      grid.addChild(gridRow);

      var gridItem:GridItem = new GridItem();
      gridItem.setStyle("borderStyle", "solid");
      gridItem.percentWidth = 1;
      gridRow.addChild(gridItem);

      gridItem = new GridItem();
      gridItem.setStyle("borderStyle", "solid");
      gridItem.percentWidth = 48;
      var text:Text = new Text();
      text.text = "No ColSpan Columns";
      gridItem.addChild(text);
      gridItem.colSpan = 1;
      gridItem.clipContent = false;
      gridRow.addChild(gridItem);

      gridItem = new GridItem();
      gridItem.setStyle("borderStyle", "solid");
      gridItem.percentWidth = 1;
      gridRow.addChild(gridItem);

      gridItem = new GridItem();
      gridItem.setStyle("borderStyle", "solid");
      gridItem.percentWidth = 13;
      gridRow.addChild(gridItem);

      gridItem = new GridItem();
      gridItem.setStyle("borderStyle", "solid");
      gridItem.percentWidth = 37;
      gridRow.addChild(gridItem);

      // SECOND ROW

      gridRow = new GridRow();
      gridRow.percentWidth = 100;
      grid.addChild(gridRow);

      gridItem = new GridItem();
      gridItem.setStyle("borderStyle", "solid");
      gridRow.addChild(gridItem);

      gridItem = new GridItem();
      gridItem.setStyle("borderStyle", "solid");
      gridItem.colSpan = 2;
      dynamicText = new Text();
      dynamicText.text = "A"; //IF THIS TEXT GROWS WIDER THAN TEXT IN THE ROW ABOVE, SPACING IS THROWN OFF
      gridItem.addChild(dynamicText);
      gridRow.addChild(gridItem);

      gridItem = new GridItem();
      gridItem.setStyle("borderStyle", "solid");
      gridRow.addChild(gridItem);

      gridItem = new GridItem();
      gridItem.setStyle("borderStyle", "solid");
      gridRow.addChild(gridItem);
      }

      private function addButton(panel:Panel):void
      {
      button = new Button();
      button.label = "Start Over";
      button.addEventListener(MouseEvent.CLICK, startOver);
      panel.addChild(button);
      }

      private function startOver(event:MouseEvent):void
      {
      startTimer();
      }

      private function startTimer():void
      {
      dynamicText.text = "A";
      charCode = 66;

      button.enabled = false;
      var myTimer:Timer = new Timer(250, 25);
      myTimer.addEventListener(TimerEvent.TIMER, timerHandler);
      myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, timerComplete);
      myTimer.start();
      }

      private function timerHandler(event:TimerEvent):void
      {
      dynamicText.text += String.fromCharCode(charCode);
      charCode++;
      }
      ]]>
      </mx:Script>
      </mx:Application>