5 Replies Latest reply on Aug 18, 2011 1:30 PM by 2009 Matt

    Styling RichTextEditor




      I must be a complete noob. I cannot seem to find a way to eliminate the margin between the RichTextEditor and its embedded TextArea. I want to layout a form and therefor want to align all fields/labels etc... including the RichTextEditor. I've tried setting the paddingLeft on the RTE and its embedded textArea but had no luck in doing so. I'm not aware of any other style property that might influence the margin.


      Any ideas?


      Kind Regards.

        • 1. Re: Styling RichTextEditor
          Subeesh Arakkan Level 4

          RichTextEditor is based on Panel control, setting the "borderThicknessLeft" style to 0 will remove the space

          1 person found this helpful
          • 2. Re: Styling RichTextEditor
            Alasiac Level 1

            Thanks for helping.


            When trying to identify the problem, I did draw the border, but apparently there's a difference in borderThickness and borderThicknessLeft. The first is what I actually expect, a border around the RTE (bounding box border), the latter however seems completely misleading to me as I thought it referred to the same border. But it proved to be a whole different kind of border. So thanks for pointing that out.


            However it only partially solved my problem. The title and toolbar still have that margin, I'm still looking for a solution to those problems.


            Any ideas?

            • 3. Re: Styling RichTextEditor
              Subeesh Arakkan Level 4


              to remove the top padding set the headerHeight to 0. If you look inside the RichTextEditor mxml file, you will find that the toolbars are inside a ControlBar. The padding at the bottom is the padding of the ControlBar. You can copy that mxml and modify the code.

              1 person found this helpful
              • 4. Re: Styling RichTextEditor
                Alasiac Level 1

                Thanks again for helping me out.


                I've fixed my layout problems by removing the padding/border around the textArea and controlBar (didn't overwrite the control though). Then I removed the header and put a simple label on top of it. For those that are interested this is what I've done:


                    <mx:Label text="label for the RTE"/>
                    <mx:RichTextEditor id="blockText" height="100%" width="100%" styleName="blockTextEditor"

                borderThicknessLeft="0" borderThicknessBottom="0" borderThicknessRight="0" borderThicknessTop="0" headerHeight="0"/>




                        private function updateStyle():void {
                            var controlBar:ControlBar = blockText.toolbar.parent as ControlBar;
                            controlBar.setStyle("paddingLeft", 0);
                            controlBar.setStyle("paddingRight", 0);



                • 5. Re: Styling RichTextEditor
                  2009 Matt


                  I have a similar problem with Flex 4.5.


                  The mx:RichTextEditor in Flex 4.5 does not have these properties: borderThicknessLeft, borderThicknessBottom, borderThicknessRight, borderThicknessTop. Do you know how to set them in Flex 4.5?