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?
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"/>
Related
I have a HGroup with a few Labels and an Image. The HGroup has verticalAlign set to baseline. All the Labels line up correctly. The Image does not. The Image is much too low.
Is there a property or style to adjust the vertical position of the Image? It looks like the HGroup uses baseline or baselinePosition to position the Labels. It looks like Image has that property and style as well but it doesn't seem to do anything when I change it.
Example code:
<s:HGroup verticalAlign="baseline"
top="10"
right="10"
left="10">
<s:Button label="Previous"/>
<s:Label text="Total results:" />
<s:Image height="28" width="100"
source="myImage.png"
/>
<s:Spacer width="100%"/>
<s:Button label="Next" />
</s:HGroup>
HorizontalLayout has a method called calculateBaselineTopBottom() and it's called in updateDisplayListReal(). It seems it is doing something with baseline and baselinePosition. It also seems to use alignmentBaseline. So far in my tests it doesn't seem to change anything.
It looks like setting the baseline property does it. It wasn't working because in my tests I was passing a String value (well, it was converted to a String along the way). So it needs to be passed as a Number. The baseline property accepts Objects which is why it would accept String or Number.
It also accepts negative values. So the following works:
<s:HGroup verticalAlign="baseline"
top="10"
right="10"
left="10">
<s:Button label="Previous"/>
<s:Label text="Total results:" />
<s:Image height="28" width="100"
source="myImage.png"
baseline="-8"
/>
<s:Spacer width="100%"/>
<s:Button label="Next" />
</s:HGroup>
I'm building an item renderer in order to have a list of these.
In these item renderer there is a first part that is a text component that should have 2 rows of text and then truncate it, the second part is just a label.
I'm trying to find how to put the text component on two rows.
Can you help me?
thanks
Use a Vgroup. Inside it place two TextArea components.
Place this inside HGroup alongside a label
<s:HGroup left="10" right="10" top="10" bottom="10">
<s:VGroup left="10" right="10" top="10" bottom="10" gap="0">
<s:TextArea id="row1_text" width="400" height="100"/>
<s:TextArea id="row2_text" width="400" height="100"/>
</s:VGroup>
<s:Label id="myLabel"/>
</s:HGroup>
I want to line up my text and combobox in a nice straight line, vertically-aligned to middle, with an HRule underneath it.
It works great until I add a combobox which seems to add some padding I can't get rid of. Meaning, I'm now a few pixels further away from the HRule.
Where does it come from and how can I get rid of it?
Here's my code:
<s:HGroup>
<mx:Image
visible="{meetingList_vs.selectedIndex==0}"
includeInLayout="{meetingList_vs.selectedIndex==0}"
source="{arrow}"
width="5"
height="10"/>
<s:Label
left="0"
text="{ 'In Progress and Upcoming ' + '(' + model.generalInfo.upcomingMeetingList.length + ')'}"
styleName="groupTitleLabel"
buttonMode="true"
click="{meetingList_vs.selectedIndex=0}"/>
<s:Label
left="0"
text="for"
styleName="groupTitleLabel"/>
<s:ComboBox
id="selectedUser"
width="125"
height="25"
borderVisible="false"/>
Thanks for any helpful tips.
Have you set the padding to 0 on the ComboBox? The default for the paddingBottom style is 3.
<s:ComboBox paddingBottom="0" />
<s:HGroup verticalAlign="middle">
or another appropriate setting for verticalAlign e.g. "baseline"
I have the following example of a <s:Group> component within Flex 4:
<s:Group left="10" top="10" right="10">
<s:layout>
<s:HorizontalLayout gap="20"/>
</s:layout>
<s:Image id="image" source="{data.imageURL}"/>
<s:Label right="0" styleName="description" text="{data.description}"/>
</s:Group>
Is there a way that I can wrap the <s:Label> component onto a new line if it becomes too long for both the width of the image and label within the group?
Thank you for your time.
To make the Label word wrap the text, it needs to have a width of some kind, so it knows where to start wrapping.
All of these labels have a width specified one way or another, and should word wrap if nec:
<s:Label id="fixedWidth" width="100"/>
<s:Label id="percentWidth" width="25%"/>
<s:Label id="constraintBasedWidth" left="0" right="0"/>
<s:Label id="maxWidth" maxWidth="100"/>
Perhaps you can try using maxWidth on the label. This should put it next to the image and let it wrap longer text.
There is also the maxDisplayedLines property, which you might find useful.
Sounds like you want TileLayout. That will arrange the components horizontally and wrap when it runs out of space.
I have a component with 2 states and I have added transitions for switching between the states, where 2 Move affects are applied to 2 different objects. This all works fine, however, after the transition from the first state to the second has completed the second state doesn not render correctly. It contains a TextInput control which is not visible, and a Button with a custom skin that is only sometimes visible and vanishes if you click on it. I have tried called invalidateDisplayList() and validateNow() after loading the second state but that has done nothing. I also have a VBox with a cornerRadius property set, strangely this does not seem to apply anymore and the corners are square, where they displayed correctly before I added the transition in. Does anyone have any ideas?
Thank you!
Here is the code for my states and their transitions:
<!-- different states of this component -->
<mx:states>
<s:State name="useForFree"
enterState="renderState()"/>
<s:State name="enterLicence"
enterState="renderState()"/>
</mx:states>
<!-- transitions between different states -->
<mx:transitions>
<!-- transition from useForFree to enterLicence state -->
<s:Transition id="toEnterLicence"
fromState="useForFree"
toState="enterLicence">
<s:Parallel id="p1"
targets="{[freeBtn, _enterLicenceMask]}">
<s:Move yFrom="250"
yTo="0"
duration="500"
targets="{[freeBtn]}"/>
<s:Move yFrom="289"
yTo="39"
duration="500"
targets="{[_enterLicenceMask]}"/>
</s:Parallel>
</s:Transition>
<!-- transition from enterLicence to useForFree state -->
<s:Transition id="toUseForFree"
fromState="enterLicence"
toState="useForFree">
<s:Parallel id="p2"
targets="{[enterLicenceBtn, _useForFreeMask]}">
<s:Move yFrom="0"
yTo="240"
duration="500"
targets="{[enterLicenceBtn]}"/>
<s:Move yFrom="-250"
yTo="0"
duration="500"
targets="{[_useForFreeMask]}"/>
</s:Parallel>
</s:Transition>
</mx:transitions>
and here is the code for my layout:
<mx:Canvas id="freeStateCanvas"
width="100%">
<mx:VBox width="100%"
horizontalAlign="center"
top="0"
mask="{_useForFreeMask}">
<mx:VBox id="freeBox"
includeIn="useForFree">
<s:Label text="some text"/>
<s:Spacer height="20"/>
<s:Image source="image path"/>
<s:Spacer height="20"/>
<mx:Button id="connectBtn"/>
<s:Spacer height="10"/>
<mx:HBox >
<s:Label text="some text"/>/>
</mx:HBox>
</mx:VBox>
<s:Label text="some text"
includeIn="useForFree"/>
</mx:VBox>
<mx:Button id="enterLicenceBtn"
includeIn="useForFree"/>
</mx:Canvas>
<!-- enter licence state -->
<mx:Canvas id="enterLicenceStateCanvas"
width="100%">
<mx:VBox id="enterLicenceBox"
mask="{_enterLicenceMask}"
includeIn="enterLicence">
<s:Label text="some text"/>
<s:Spacer height="20"/>
<s:TextInput id="licenceInput"
width="200"
height="30"/>
<s:Spacer height="20"/>
<mx:Button id="registerBtn"/>
<s:Spacer height="10"/>
<mx:HBox>
<s:Label text="some text"/>
<s:Label text="some more text"/>
</mx:HBox>
</mx:VBox>
<mx:Button id="freeBtn"
includeIn="enterLicence"/>
</mx:Canvas>
where the variables being set as masks are UIComponent instances where I have used their graphics property to draw a rectangle.
Okay, so I found what the problem was, but thanks for trying to help shaunhusain.
In my code you can see I have 2 VBox containers called "freeBox" and "enterLicenceBox" and these actually had a white background and rounded corners, and a DropShadowFilter applied to them (I removed these properties when putting up the code as I felt they were irrelevant, that was a mistake).
This DropShadowFilter was the cause of all my problems and on removing it, the transitions worked fine and all content was rendered correctly. I assume this is just a strange Flex bug, and I didn't find a workaround, I just used images as the box backgrounds for a quick fix.