How do you remove the border of a Flex 4 TextArea Component (spark themed halo)

Question

With the Flex 3 SDK you simply needed to set the borderThickness style to 0, or set borderStyle to none. With the Flex 4 SDK ad the Spark theme, this has no effect.

Allred

Answer 1

You have to set the borderSkin to null

<mx:TextArea borderSkin={null} />

Allred

The question is about spark.components.TextArea, not mx.controls.TextArea – Delldella

Answer 2

Try something like:

borderVisible="false"

Schrock

Answer 3

If you want to remove the border from spark TextArea's here are some ways to do so: To make all spark TextAreas have no border you can do this:

s|TextArea {
  borderVisible : false;
}

You can also make a simple style and only apply them to specific spark TextAreas like so:

.noBorder {
  borderVisible : false;
}
...
<s:TextArea styleName="noBorder"/>

You can turn it off via creation complete like so:

<s:Application ...
  creationComplete="onCreationComplete()"/>
...
private function onCreationComplete() : void {
  mySparkTextArea.setStyle('borderVisible', false);
}
...
<s:TextArea id="mySparkTextArea"/>
</s:Application>

Finally, you can make a skin, per DrMaxmAd's suggestion, like so:

...
<!-- border/fill --> 
<s:Rect left="0" right="0" top="0" bottom="0">
    <s:stroke>
        <s:SolidColorStroke color="#5C5C5C" weight="1" alpha="0"/>            
    </s:stroke>
    <s:fill>
        <s:SolidColor color="#FFFFFF"/>
    </s:fill>
</s:Rect>
...

Hydrotherapeutics

Answer 4

I haven't dabbled in Flash Builder 4 yet, but I know in Flex 3 you can modify things like this (when its not possible another way):

var tb:TextInput = new TextInput();
tb.getChildAt(0).setStyle(...);

Might want to give this a try, you just need to find the correct child element usually.

EDIT: Here's your answer

Accommodative

Answer 5

Jeol your answer works for MX components, for the flex 4 spark textarea component you set borderVisible="false" and in code lblMessage.setStyle("contentBackgroundAlpha", 0);

Also, if your doing this, you probably want the hack to make the damn thing autosize to it's content... set heightInLines="{NaN}"

<s:TextArea borderVisible="false" focusEnabled="false" width="100%" id="lblMessage" heightInLines="{NaN}"  editable="false" selectable="true" lineBreak="toFit" verticalScrollPolicy="off" horizontalScrollPolicy="off" />

protected function OnCreationComplete(objEvent:Event):void{
   lblMessage.setStyle("contentBackgroundAlpha", 0);
 }

...and Thanks for RobotLegs, it's freaking awesome!

Assurbanipal

Answer 6

well i have tried the above code but it does not work for me Flex Hero SDK 4.5, so what i did i selected the textArea and created a new custom skin and change the border alpha to 0.

<!-- border/fill --> 
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="#5C5C5C" weight="1" alpha="0"/>            
        </s:stroke>
        <s:fill>
            <s:SolidColor color="#FFFFFF"/>
        </s:fill>
    </s:Rect>

simple and sweet

Theomorphic

Answer 7

In Flex 3: The border for TextArea component can be controlled by using these two attributes/properties:

• borderSkin="{null}"
• focusAlpha="0"

Focus alpha ensures that you don't get the border showing up even when the TextArea is selected.

Chorus