views:

225

answers:

1

Here is my problem, fairly obvious: [img at bottom]

The problem, as you can see, is that the text (height and width) is nothing like the Height and Width of the compoent (Spark TextArea) that I have set via the Main.mxml file in Flex 4. This is pissing me off so much because nobody can tell me why this is happening, or how to fix it. Text is dynamically added to the TextArea as people send messages in the server, hence the valueCommit line.

I don't understand this, because I know it's not the fault of my fx:Script. I know this, because when I switch over to the Design tab of Adobe Flex Builder 4; the lines are just as messed up as in the screen shot.

I've been tearing my hair out (metaphorically) over this issue, please help me come to an answer.

<!-- State: interface -->
    <s:TextArea id="incomingMessages" includeIn="interface"
        heightInLines="{NaN}" widthInChars="{NaN}"
        y="10" x="9" minWidth="426" minHeight="442"
        text="Connected to Chat Paradise v5.00a, By CharlesBroughton."
        valueCommit="incomingMessages_valueCommitHandler(event)"/>
        <!-- Toolbar -->
        <s:HGroup includeIn="interface" x="10" y="460" width="363" height="22">
            <mx:ColorPicker id="tintColor" selectedColor="#FFFFFF" includeIn="interface"/>
            <s:Label id="curname" height="22" width="100" text="&lt;user&gt;" fontSize="16" includeIn="interface"/>
            <s:CheckBox label="AutoScroll" id="scrollToggle" selected="true"/>
            <s:Button id="clearButton" width="60" height="22" label="Clear" click="incomingMessages.text = &quot;&quot;;"/>
        </s:HGroup>
        <!-- end Toolbar -->
    <s:Button id="sendMessage" width="60" height="22" label="SEND" includeIn="interface" x="375" y="460"/>
    <s:TextArea id="outgoingMessages" x="10" y="480" maxChars="2048" editable="true" width="425" height="50" includeIn="interface" skinClass="graphite.skins.TextAreaSkin"/>
    <s:List id="userlist" x="443" y="10" width="128" height="488" includeIn="interface" itemRenderer="userlistRenderer"/>
    <s:ComboBox includeIn="interface" x="444" y="506" width="127" id="songs" selectedIndex="0"/>
<!-- end State: interface -->

Here is the FX:SCRIPT for incomingMessages_valueCommitHandler(event) if you care:

protected function incomingMessages_valueCommitHandler(event:FlexEvent):void
{
  if (scrollToggle.selected)
   incomingMessages.textDisplay.verticalScrollPosition = incomingMessages.textDisplay.maxHeight;
}

I'm not allowed to post images [less than 10 repute] so here is a link: Image Link Edited to include the surrounding code as asked for. What you all don't seem to understand is that the text box is taking up the size I set it to, but the TEXT inside the text box is only taking up like 100px wide and high of the total text box area, please check the picture link.

Okay so, we found the problem, graphite.styles.TextAreaSkin ... WHAT WAS ADOBE SMOKING?

<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" measuredSizeIncludesScrollBars="false">
    <s:RichEditableText id="textDisplay"
        lineBreak="toFit"
        textAlign="left"
        selectable="true"
        verticalAlign="top"
        paddingBottom="4"
        paddingTop="4"
        paddingLeft="4"
        paddingRight="4"
        height="125"
        width="125"
        maxWidth="125"
        maxHeight="125"/>
</s:Scroller>
+1  A: 

What type of component is the parent to your TextArea? Without knowing any of the surrounding mxml, you may want to set width and height to 100%. If that doesn't work, post some more of your mxml and we'll try to figure it out. Hope that helps.

Wade Mueller
You asked for it, so I added more code. Please re-review my question.
Charles Broughton
Whoa, you're right, I didn't fully get your question at first. That's bizarre. I can't reproduce this, TextArea seems to be working fine for me, but I do get strange behavior (TextArea goes full width of the text, instead of wrapping) when I explicitly set widthInChars to NaN as you do above. What happens when you remove that? Also, a dumb question: Are you sure there aren't any line breaks in your text? Lastly, you might try creating your own skin class based on the one in the SDK and change the widthInChars value of the textDisplay component to see if that makes a difference.
Wade Mueller
I changed the component skin to spark.skins.spark.TextAreaSkin and it seems to be working fine now... but spark's skin is really fugly, so any ideas on why the graphite skin is bugged in this way?graphite.skins.TextAreaSkin is the only one that seems to create that odd tiny spot... so now we know it's skin related.
Charles Broughton
Wait, I'm going to fucking shoot Adobe employees in a moment.. I created a new style for the TextArea based on graphite.skins.TextAreaSkin, and guess what? Hard coded height and width on the fucking richtextarea... editing original post to include the exscript. My new question is, how do I change these?
Charles Broughton
You are aweomse my friend, your simple suggestion to change the skin has gone and fixed the thing! Thank you. Question marked solved.
Charles Broughton