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.
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've got a repeater using an array of objects as the dataprovider. For each object, I want to create a label inside a container. Each container should be the same size even if the label is too long to display.
<mx:HBox width="100%">
<mx:Repeater id="repeater" dataProvider="{objList}">
<mx:Box width="11%" verticalAlign="middle" horizontalAlign="center">
<mx:Label text="{repeater.currentItem.Text}" width="100%" textAlign="center" truncateToFit="true"/>
</mx:Box>
</mx:Repeater>
</mx:HBox>
If I know the list has 9 items, I can set the width to 11% and be happy. But I want to be able to handle a list of 6-15 items.
I've considered setting the width of the box to the result of a function, but the width will not accept a string result. Returning a number will just set it to that exact width rather than a percentage.
<mx:Box width="{GetPercent()}" verticalAlign="middle" horizontalAlign="center">
I've also considered looping over the repeater items to set the percentWidth, but it would be preferable to have the width defined before rendering.
With a Spark label you can simply set each label to 100% width and force it to automatically truncate, like this: <s:Label showTruncationTip="true" maxDisplayedLines="1" width="100%"/>. Not sure if that works the same with the MX label component. With the Spark components it's important to also set the maxDisplayedLines to get truncation working properly.
Since I don't have spark, I eventually got this to work by replacing the Box with a Canvas (that had clipContent set to true). The weird part was that also I had to remove width="100%" from the label (and of course set horizontalCenter to 0).
<mx:Repeater id="repeater" dataProvider="{objList}">
<mx:Canvas verticalScrollPolicy="off" horizontalScrollPolicy="off" clipContent="true">
<mx:Label text="{repeater.currentItem.Text}" horizontalCenter="0" textAlign="center"/>
</mx:Canvas>
</mx:Repeater>
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.
Here is my problem, fairly obvious: [img at bottom]
The problem, as you can see, is that the text (height and width) is nothing like the Height and Width of the compoent (Spark TextArea) that I have set via the Main.mxml file in Flex 4. This is pissing me off so much because nobody can tell me why this is happening, or how to fix it. Text is dynamically added to the TextArea as people send messages in the server, hence the valueCommit line.
I don't understand this, because I know it's not the fault of my fx:Script. I know this, because when I switch over to the Design tab of Adobe Flex Builder 4; the lines are just as messed up as in the screen shot.
I've been tearing my hair out (metaphorically) over this issue, please help me come to an answer.
<!-- State: interface -->
<s:TextArea id="incomingMessages" includeIn="interface"
heightInLines="{NaN}" widthInChars="{NaN}"
y="10" x="9" minWidth="426" minHeight="442"
text="Connected to Chat Paradise v5.00a, By CharlesBroughton."
valueCommit="incomingMessages_valueCommitHandler(event)"/>
<!-- Toolbar -->
<s:HGroup includeIn="interface" x="10" y="460" width="363" height="22">
<mx:ColorPicker id="tintColor" selectedColor="#FFFFFF" includeIn="interface"/>
<s:Label id="curname" height="22" width="100" text="<user>" fontSize="16" includeIn="interface"/>
<s:CheckBox label="AutoScroll" id="scrollToggle" selected="true"/>
<s:Button id="clearButton" width="60" height="22" label="Clear" click="incomingMessages.text = "";"/>
</s:HGroup>
<!-- end Toolbar -->
<s:Button id="sendMessage" width="60" height="22" label="SEND" includeIn="interface" x="375" y="460"/>
<s:TextArea id="outgoingMessages" x="10" y="480" maxChars="2048" editable="true" width="425" height="50" includeIn="interface" skinClass="graphite.skins.TextAreaSkin"/>
<s:List id="userlist" x="443" y="10" width="128" height="488" includeIn="interface" itemRenderer="userlistRenderer"/>
<s:ComboBox includeIn="interface" x="444" y="506" width="127" id="songs" selectedIndex="0"/>
<!-- end State: interface -->
Here is the FX:SCRIPT for incomingMessages_valueCommitHandler(event) if you care:
protected function incomingMessages_valueCommitHandler(event:FlexEvent):void
{
if (scrollToggle.selected)
incomingMessages.textDisplay.verticalScrollPosition = incomingMessages.textDisplay.maxHeight;
}
I'm not allowed to post images [less than 10 repute] so here is a link: Image Link
Edited to include the surrounding code as asked for. What you all don't seem to understand is that the text box is taking up the size I set it to, but the TEXT inside the text box is only taking up like 100px wide and high of the total text box area, please check the picture link.
Okay so, we found the problem, graphite.styles.TextAreaSkin ... WHAT WAS ADOBE SMOKING?
<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" measuredSizeIncludesScrollBars="false">
<s:RichEditableText id="textDisplay"
lineBreak="toFit"
textAlign="left"
selectable="true"
verticalAlign="top"
paddingBottom="4"
paddingTop="4"
paddingLeft="4"
paddingRight="4"
height="125"
width="125"
maxWidth="125"
maxHeight="125"/>
</s:Scroller>
What type of component is the parent to your TextArea? Without knowing any of the surrounding mxml, you may want to set width and height to 100%. If that doesn't work, post some more of your mxml and we'll try to figure it out. Hope that helps.
As you said, this is a problem with the graphite textarea skin. I created a new skinClass for my textarea(based on graphite text area skin). and replaced the scroller and richeditabletext with the Spark text area ones. And added textAlign = "left". And it started working fine. Let me know if this helped. Thanks.