flex - How to prevent container in itemRenderer from exceeding width of list container? -
in flex mobile project have simple itemrenderer i'm trying create "bubble" texting effect, similar ichat or iphone (just im going for). if text longer screen runs off, rather going down line.
if set group thats holding rectangle(to create bubble effect) , label 100% works , keeps exceeding list containers bounds, group @ 100% , looks bad, i'm trying keep "bubble" around text.
anyway so, @ top of itemrenderer tried specifying:
<s:itemrenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%">
and here's layout figured since msg_container
has width of 100% hoping bubble_lable_group
not exceed but...it doesnt...it runs off. tried setting max width not allow input percents. , 1 more time. know if set bubble_lable_group
width 100% works, , keeps going off edge, rectangle "bubble" stretches way across , looks bad.
<s:vgroup id="main_container" horizontalalign="left" paddingbottom="10" paddingtop="10" verticalalign="top" width="100%"> <s:vgroup id="name_container" width="100%"> <s:label id="name_label" fontsize="20" fontweight="bold" text="name: " /> </s:vgroup> <s:vgroup id="msg_container" width="100%" paddingleft="20"> <s:group id="bubble_lable_group"> <s:rect id="the_bubble_shape" width="100%" height="100%" radiusx="15" radiusy="15" > <s:fill> <s:lineargradient rotation="90"> <s:gradiententry color="{grone}"/> <s:gradiententry color="{grtwo}"/> </s:lineargradient> </s:fill> </s:rect> <s:label id="msg_txt" width="100%" text="msg text here" fontsize="18" color="#ffffff" paddingtop="15" paddingright="15" paddingbottom="15" paddingleft="15"/> </s:group> </s:vgroup> </s:vgroup>
any ideas or tricks pull achieve effect i'm going , keep inside parent list container? i'm stumped.
edit: here's screenshots illustrate issue:
well, looks want set maxwidth
property. only, can set pixels, not percents. guessing since on mobile, don't want setting absolute pixels. soooo, if did bit tricky? data bind max width width of renderer minus padding of message container...
<s:group id="bubble_lable_group" maxwidth="{width - msg_container.paddingleft}" >
feels hack, works me :)
note: using standard itemrenderer
class quite inefficient in mobile. may not issue you, aware of it. see presentation 360flex more info on that: http://zaa.tv/2011/06/360flex-denver-2011-flex-performance-tips-and-tricks/
Comments
Post a Comment