Flex - Prevent text running off edge of component

Question

I have a spark Window which contains a VGroup. Inside the VGroup are a couple of HGroups. What's happening is that, in the label whose styleName is "toastBody", if its text is too long then the 'x' closeButton gets pushed off the right edge of the component, and the text runs off the right edge as well. This even though I've set the VGroup's left, top, and right, and have set paddingRight to 10 on the label.

  <s:VGroup minHeight="0"
                left="16" top="12" right="4">
        <s:HGroup width="100%" gap="45">
              <s:Label styleName="toastTitle"
                          id="titleLabel" width="100%" />
              <s:Button skinClass="skins.ToastCloseButtonSkin" id="closeButton"
                            buttonMode="true" useHandCursor="true"/>
        </s:HGroup>
        <s:HGroup>
              <s:BitmapImage left="10" top="16"
                                   source="assets/iconChatBubbleToastMsg.png" id="chatIcon"/>
              <s:Label styleName="toastBody"
                          id="bodyLabel"
                          paddingRight="10"/>
        </s:HGroup>

  </s:VGroup>

How can I fix this?

Answer 1

You can set a maxWidth on that label to prevent it from pushing off the right edge, it will start to wordwrap though.

 <s:Label styleName="toastBody"
                          id="bodyLabel"
                          paddingRight="10" maxWidth="800"/>