How to get rid of white line between toolbar and text area in RichTextEditor in Flex

Question

I included a RichTextEditor in my Flex application. I got the the toolbar of the richTextEditor to the top by following code.

<mx:RichTextEditor id=”richTextEditor” creationComplete=”richTextEditor_creationCompleteHandler(event)”
width=”550″ height=”200″
headerHeight=”0″ />

Script:

protected function richTextEditor_creationCompleteHandler(event:FlexEvent):void

{
richTextEditor.toolbar.removeChild(richTextEditor.linkTextInput)

/* toolbar is in ControlBar, ControlBar is not a direct content
child of the Panel in RichTextEditor. */

richTextEditor.toolbar.parent.removeChild(richTextEditor.toolbar);
controlBarContainer = new HBox();
controlBarContainer.percentWidth = 100;
controlBarContainer.setStyle(‘paddingLeft’, 5);
controlBarContainer.setStyle(‘paddingTop’, 5);
controlBarContainer.setStyle(‘paddingRight’, 5);
controlBarContainer.setStyle(‘paddingBottom’, 5);
controlBarContainer.addChild(richTextEditor.toolbar);
richTextEditor.addChildAt(controlBarContainer, 0);

}

But the issue is when I put a background color to the toolbar it comes like the following image.

There's a white line between the toolbar and the textArea. Can someone tell me how to remove that white line?

Thanks in advance.

Jasmine Jasmine · Accepted Answer · 2016-11-11T07:45:25

You can set the verticalGap style of RichTextEditor to 0. That should clear the white space. I tried it and worked for me. Hope this helps

<mx:RichTextEditor id="richTextEditor" creationComplete="richTextEditor_creationCompleteHandler(event)"
                   width="550" height="200"
                   headerHeight="0" verticalGap="0"/>

How to get rid of white line between toolbar and text area in RichTextEditor in Flex

1 Answers