minimize and maximize <mx:RichTextEditor>

hi guys
I have a question in flex, i have bunch of <mx:RichTextEditor> boxes on my screen like this

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
              creationComplete="init()"
              horizontalAlign="left"
              verticalAlign="top">
<mx:VBox width="1058" styleName="responseBox" height="264">
<mx:HBox width="1051">
<mx:RichTextEditor id="strbenefits2" width="1051"
  title="Question 1:  List number of Players impacted:"
 text=" answer"
 height="261"/>
</mx:HBox>                  
</mx:VBox>
            
 ...a bunch of such RichTextEditor boxes
            
      
</mx:VBox>       


The problem is when the page loads , the <mx:RichTextEditor> boxes are big so they take up lot of space on the screen. so i was thinking
when the screen loads, i want the <mx:RichTextEditor>  boxes to be minimized showing only the title (example 'Question 1:  List number of Players impacted').
only when user puts the mouse cursor on the box it should expand to its size and also should be able to edit it.
When mouse cursor moves away it should minimize again.

Is that possible?

thanks
royjaydAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dgofmanCommented:
Please modify your code and use maxHeight property, createComplite handler

<mx:RichTextEditor id="strbenefits2" width="1051" 
								   title="Question 1:  List number of Players impacted:"
								   text=" answer"
								   maxHeight="261" creationComplete="init(event)"/>

Open in new window


Here is my functions

import mx.core.UIComponent;
import mx.core.mx_internal;

private function init(event:Event):void{
	var rte:RichTextEditor = event.currentTarget as RichTextEditor;
	var titleBar:UIComponent = rte.mx_internal::getTitleBar();
	titleBar.addEventListener(MouseEvent.CLICK, expandCollapse);
	expandCollapse(event);
}

private function expandCollapse(event:Event):void{
	var rte:RichTextEditor;
	if(event.currentTarget is RichTextEditor){
		rte = event.currentTarget as RichTextEditor;
	}else{
		rte = event.currentTarget.parent as RichTextEditor;
	}
	var headerHeight:uint = rte.mx_internal::getHeaderHeightProxy();
	rte.height = (rte.height == headerHeight ? rte.maxHeight : headerHeight);
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
royjaydAuthor Commented:
just tried that. getting this error on  init()
>>><mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
              creationComplete="init()"
              horizontalAlign="left"
              verticalAlign="top">

error on init() , incorrect number of arguments.


dgofmanCommented:
you need to remove init() call in VBox or rename my function.
I don't know full your code, be smart :)
Virus Depot: Cyber Crime Becomes Big Business

The rising threat of malware-as-a-service is not one to be overlooked. Malware-as-a-service is growing and easily purchased from a full-service cyber-criminal store in a “Virus Depot” fashion. View our webinar recording to learn how to best defend against these attacks!

royjaydAuthor Commented:
yep, just a rename.
it works but here is the problem

my richtexteditor is wrapped in a <mx:VBox> like this

<mx:VBox width="1058" styleName="responseBox" height="264">
<mx:HBox width="1051" >
<mx:RichTextEditor id="strbenefits2" width="1051" title="Question 1:  List number of Players impacted:"
  text=" answer"   maxHeight="261" creationComplete="init(event)"/>
</mx:HBox>
</mx:VBox>      

so when it is in minimized state the height of VBox(264) still shows up which i dont want, so i think i have to dynamically change the height of VBox on minimize and expand, any idea i can do that?

thx.
dgofmanCommented:
Just don't set height for any parents
royjaydAuthor Commented:
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apache Flex

From novice to tech pro — start learning today.