PDA

View Full Version : How to auto-width and center a floating component?



charris
31 Oct 2011, 1:07 PM
What's the best way to get a floating component to "shrink" to the width of its contents (a single line of text) and center horizontally?

What I'm doing now is *not* specifying a width for the component and using the "html" property to set the text; the component seems to automatically set its width to just fit the contents.

The problem is that the component's getWidth() function returns the width of the entire browser window (e.g., 1500px). I need the actual component width to do the calculation for finding the 'centered' y-coordinate.

Suffice it to say, I'm wondering if there's a better way to solve this problem in general. Any ideas/advice would be great.

Thanks

JambaFun
31 Oct 2011, 2:30 PM
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-method-center

My best bet :)

charris
31 Oct 2011, 2:48 PM
That works! I don't know how--all the other functions I tried on the component and/or element regarding width didn't work--but I'll take it! Thanks!