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;
if(text == null)
if(text.length <= 1)
_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!Submit to Hacker News
[NOTE] This post has been imported to Hugo from a Wordpress blog. It may be broken, missing images, code snippets or other information.
[NOTE] updated July 14, 2010. It's 3120 days old . This article may have outdated content.