Set button width to text width in flex

Well, I have been working on a very interesting project recently, really stretching flex to the limits :-) I needed to set buttons, linkButtons, Labels and more components width to the width of the text inside them. Usually, flex does it for you, but the width was hardcoded in compile time and I needed to change the text and the width in runtime and resize the component according to that.

I have written a nifty helper function for that.

Here it is:

/**
* This function will accept the text and the UI component and set the width to the width of the text
* @param text the text or label of the component
* @param container the container casted to a UIComponent
*
*/
public static function measureTextWidthAndResizeComponent(text:String, container:UIComponent):void
{
	var _measuredWidth:Number = 0;
	var  _paddingLeft:uint = 0;
	var _paddingRight:uint = 0;
	var _horizontalGap:uint = 0;
	var _addedToWidth:int;

	if(text == null)
		return;

	if(text.length <= 1)
		return;

	_paddingLeft = container.getStyle("paddingLeft");
	_paddingRight = container.getStyle("paddingRight");
	_horizontalGap = container.getStyle("horizontalGap");

	_addedToWidth = int(_horizontalGap + _paddingLeft + _paddingRight);

	var lineMetrics:TextLineMetrics = container.measureText(text);

	_measuredWidth = (lineMetrics.width + _addedToWidth);
	container.width = _measuredWidth;
}

That’s it, enjoy!

<img src="http://feeds.feedburner.com/~r/KensoDev-en/~4/RNqvzB7H9Z0" height="1" width="1"/>
Thank you for your interest!

We will contact you as soon as possible.

Send us a message

Oops, something went wrong
Please try again or contact us by email at info@tikalk.com