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.

score 9 · Answer 1 · edited Mar 01 '12 at 13:36

9

Try something like:

borderVisible="false"

edited Mar 01 '12 at 13:36

Mark Ursino

31,209
11
51
83

answered Jan 07 '10 at 07:35

bz.

99
1
2

score 2 · Answer 2 · answered Dec 21 '12 at 18:20

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>
...

score 1 · Answer 3 · edited Jun 25 '09 at 17:42

1

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

edited Jun 25 '09 at 17:42

Lucas Jones

19,767
8
75
88

answered Jun 25 '09 at 17:34

Chris Klepeis

9,783
16
83
149

score 1 · Accepted Answer · answered Jun 25 '09 at 19:33

1

You have to set the borderSkin to null

<mx:TextArea borderSkin={null} />

answered Jun 25 '09 at 19:33

Joel Hooks

6,465
4
33
39

The question is about spark.components.TextArea, not mx.controls.TextArea – Alexander Farber Dec 09 '11 at 13:20

score 0 · Answer 5 · answered Oct 22 '13 at 03:47

0

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.

answered Oct 22 '13 at 03:47

Abhijeet

8,561
5
70
76

score 0 · Answer 6 · answered Dec 01 '10 at 23:39

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!

score 0 · Answer 7 · answered Jul 07 '11 at 11:34

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

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

7 Answers7

Linked