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"
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 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"/>
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 cant quite understand why two vertical label components dont appear right under each other. There seems to be a lot of space between them, is there anyway to get this space removed as setting padding makes no difference at all.
For example, take this layout code:
<mx:VBox>
<mx:Label text="Title" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" />
<mx:Label text="Second bit of text I want to appear right under the first" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" />
</mx:VBox>
You need to set the VBox's verticalGap to 0 or a suitable value.
Margin = 0?