Chrome table cells not word wrapping correctly

In working on my recently released vain routes gem, I came across a frustrating issue getting the table in chrome to word wrap the data in the cells.  It was working flawlessly in Firefox and even IE but despite trying several different attempts to make it work; Chrome kept overlapping the text between cells.

I tried several different iterations including explicitly defining  the width of the table cells and the table itself.  I even set the overflow property to hidden, something I thought would have at least constrained the text from overflowing.

To keep things short, this is what I needed to do

  1. Keep the explicit width defined on the table
  2. Set the css table-layout on the table as:
    table-layout: fixed
  3. Set the css word-wrap property on the td element as:
    word-wrap: break-word

As a final note, I initially tried using the css word-wrap property for a col element, but for whatever reason it did not take.

Hopefully I’ve helped someone else out there who may be having a similar problem.

Flex Scroll Bars expected on child hbox – but on application instead?

I wrestled with this for a few days so I’m posting it here in hopes that it will help someone.  For whatever reason I had a really difficult time finding out the solution – to something that should have been very basic.  Here is a sample application where one would expect that the scroll bars would appear on the child mx:HBox:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:mx="library://ns.adobe.com/flex/halo"  layout="vertical"
                    minWidth="800"
                    minHeight="600">
     <fx:Script>
          <![CDATA[
               [Bindable]
               private var dp:Array = new Array(30);

          ]]>
     </fx:Script>
     <mx:HDividedBox width="100%" height="100%">
          <mx:Panel width="15%" height="100%">
               <mx:Label text="left"/>
          </mx:Panel>
          <mx:Box id="content" width="85%" height="100%" verticalScrollPolicy="auto" horizontalScrollPolicy="auto" >
               <mx:Repeater dataProvider="{dp}">
                    <mx:Label text="hello!" />
               </mx:Repeater>
          </mx:Box>
     </mx:HDividedBox>
</mx:Application>

I would have expected the HBox#content to have scroll bars, instead the scroll bars show up on the main application – why I have not figured out. However the solution (hack?) is to simply wrap the HBox#content in a mx:Canvas tag and put the width, height, and scrollbar settings there. Here is my solution (Let me know if you have a beter one!) :


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:mx="library://ns.adobe.com/flex/halo"  layout="vertical"
                    minWidth="800"
                    minHeight="600">
     <fx:Script>
          <![CDATA[
               [Bindable]
               private var dp:Array = new Array(30);

          ]]>
     </fx:Script>
     <mx:HDividedBox width="100%" height="100%">
          <mx:Panel width="15%" height="100%">
               <mx:Label text="left"/>
          </mx:Panel>
          <mx:Canvas width="85%" height="100%" verticalScrollPolicy="auto" horizontalScrollPolicy="auto" >
           <mx:Box id="content" >
               <mx:Repeater dataProvider="{dp}">
                    <mx:Label text="hello!" />
               </mx:Repeater>
          </mx:Box>
       </mx:Canvas>
     </mx:HDividedBox>
</mx:Application>