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.
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 try to display a text with a Label component.
In some case text is longer than label weight. So I hope to use something like word-wrap option to display text on 2 lines.
<s:BorderContainer height="26" width="100%" borderStyle="inset" id="bcDos">
<s:Label text="{phpImportant}"
textAlign="center"
fontWeight="bold"
color="#FF0730"
fontSize="12"
paddingBottom="1"
paddingTop="1"
width="100%"
height="100%"
maxDisplayedLines="2"/>
</s:BorderContainer>
With this code, only 1 line is displaying. If there is more text than the label can display, Label truncate the text for me with a truncation indicator such as "...".
In my dream I'd like to have automatic word-wrap on 2 lines.
Thanks for helping.
You've indicated a height of 26px for your Label, which for its current font properties (fontSize, fontWeight, ...) can not show more than one line.
So to show your text on two lines, you've to use an appropriate height value or simply keep that property empty so your label will be resized automatically :
<s:Label text="{phpImportant}" textAlign="center"
fontWeight="bold" color="#FF0730" fontSize="12"
paddingBottom="1" paddingTop="1"
width="100%" maxDisplayedLines="2"
/>
Hope that can help.
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 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"/>
Please, can anyone help me out on this : the piece of code below was working fine until i decided to add a scroller for better view and suddenly, i get the error:
"Multiple initializer values for default property, 'viewport' of type 'spark.core.IViewport'"
Thanks
[CODE]
<s:Scroller
width="100%"
height="100%"
>
<s:Group id="basicDataGroup" includeIn="initial">
<s:HGroup id="buttonGroup"
x="250"
paddingTop="20"
gap="15">
<s:Button id="addBT" label="{resourceManager.getString('aggregationUI','add')}" click="addBT_clickHandler(event)"/>
<s:Button id="delBT" label="{resourceManager.getString('aggregationUI','delete')}"/>
</s:HGroup>
<s:DropDownList id="languageCombo"
prompt="{resourceManager.getString('aggregationUI','lang')}"
dataProvider="{new ArrayCollection([{locale:'fr_FI',label:'France'}, {locale:'en_US', label:'English'}])}"
change="languageChange(event)"
width="100"
x="473"
y="20"/>
<components:SearchComponent id="searchModel" searchClick="searchModel_searchClickHandler(event)"/>
<components:DataComponent id="basicData"
x="250"
y="50"/>
</s:Group>
<s:Group id="newModelGroup" includeIn="newModel">
<components:NewDataComponent id="newModelData"/>
</s:Group>
</s:Scroller>
[/CODE]
A scroller can only be a viewport to one component. In your scroller, you have basicDataGroup and newModelGroup. Even though you have states so they don't both exist at the same time, I don't think Flex is that coordinated to know that. Instead, wrap those two Groups in one Group, and make that parent Group the Scroller's viewport.
Hope that helps,
Ryan