trouble with custom 'Text Bubble' component (examples included)

Question

I'm trying to use a custom Text component to show a series of comments. I got the original idea from:

http://www.eonflex.com/?p=40

I've got the base case working but I am stuck with 2 problems I cant seem to figure out:

1. Since I am drawing around the text, the actual height of each bubble is greater than that of the Text field, as a result, the last bubble is always chopped off. I have tried explicitly overriding the height getter, and adding some padding, but I cant seem to get it right. You can see an example here: http://test.lambandtunafish.com/bubbles/CommentTest.swf

2. In my layout, I have 2 VBoxes (one nested inside the other). The first vbox shows a form where the user can enter a comment, and the second box has all the comments. In order to ensure that the scrollbars only show up on the second box, I set minHeight="0" on the nested VBox, but then for some reason, some comments' text is shifted to the right. You can see an example here (look at the first comment): http://test.lambandtunafish.com/bubbles/CommentTest-minHeight.swf

Rather than posting the code here, I've provided some links:

Container: http://test.lambandtunafish.com/bubbles/CommentTest.mxml Bubble: http://test.lambandtunafish.com/bubbles/CommentBubble.as

If anyone has any ideas, I would appreciate it.

Thanks!

Answer 1

Have you considered adding padding to you VBoxes?

  <mx:VBox id="vBox" verticalGap = "100"/>

There is a nice example here