How to reduce label estate

[mabian69]

Hello,

I'm trying to have labels with opaque background almost exactly as big as the
text in it but I get labels much bigger than the text (especially in height,
about 1.5 x font height).

I've tried forcing height, but the text is clipped and the border remains; is
there some property that can help?

Thanks,
Mario

[atta707]

Look at the paddingTop and paddingBottom styles for the Label component.

[mabian69]

Thanks, already tried, both as SetStyle or directly in the mxml object declaration; seems having no effect.

[slaingod]

You can use negative values for the padding, if you hadn't tried that.

[mabian69]

Thanx slaingod, already been there as well, setting padding to negative values
change the label position inside its container, it doesn't seem to affect the
label appearance.

I find it incredible that you cannot alter in any way the margins between the
label edges and the text in it.

- Mario

[slaingod]

Keep in mind that Flex is ultimately based on Flash, which does an amazing
amount of work considering it is a 1.5MB download. For instance, text
justification was just recently added. Buy comparison Silverlight requires
something like 10MB, and may even require .NET to be installed on top of that,
not sure.

Reminds me of .Net Compact Framework which *doesn't* support text
justification, which may reduce the size of the ROM, but requires everyone who
needs it to go without or do a custom implementation.

Have you tried using getBounds() or getRect() to see if they return something
different that you can then fill yourself in AS3?

[mabian69]

I agree with you mostly but... according to the docs (Flex Builder 3.0), the
paddingTop and paddingBottom properties of Label control should really do what
I expect them to do.

They just don't...

- Mario

[VarioPegged]

Could you post some of your code? Reading your initial post, you mention using an opaque background for your label control, but <mx:Label> doesn't have backgrounds or borders.

TS

[mabian69]

Fair.

<mx:HBox horizontalGap="0">
<mx:Label width="5"/>
<mx:Label id="lbPrice2" width="150" opaqueBackground="0x000088" text="THIS IS
A TEST"/>
<mx:Label width="5"/>
</mx:HBox >

Try reducing the height of the blue label without having text clipped
vertically (I mean, I haven't managed to decrease the amount of "blue" above
and below the text).

Thanks,
Mario

[VarioPegged]

I think you have a valid gripe with the inability of the Label control to
adjust to the exact size of the text within it, meaning true zero padding. The
label's child, TextField is the culprit.

It seems impossible to force the TextField (part of flash.text) to ignore its
gutter values, so it forms a permanent padding around the TF, even if you try
to get the true height of the TF via textHeight. These values are part of the
overall edge metrics calculations of the label, so setting paddingTop and
paddingBottom to 0 doesn't do squat. I always use text with a little room
around it, so it's never even crossed my mind to have a true 0 padding.

Flash Player 10 provides much better text control, but until it is more main
stream you may have to hack it ...

TS

Hack follows:

-------------CustomLabel.mxml--------------
<?xml version="1.0" encoding="UTF-8"?>
<!--CustomLabel.mxml-->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

<mx:Script>
<![CDATA[

[Bindable]
public var text:String;

/*Hard-coded values can obviously be handled more elegantly.
These values get a fairly flush edge all around the
label with text sizes 10 to 30 pixels, but it isn't 100%. */
private function init() : void {
if (opaqueBackground) myLabel.opaqueBackground = opaqueBackground;
var tf:TextField = myLabel.getChildAt(0) as TextField;
this.width = tf.textWidth + 4;
this.height = tf.textHeight - 4;
myLabel.y = -3;
}

]]>
</mx:Script>
<mx:Label id="myLabel" text="{text}" />
</mx:Canvas>
----------------Main.mxml----------------
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:cl="*">

<mx:Style>
Label {
font-size: 12;
color: "0xFFFFFF";
}
</mx:Style>

<cl:CustomLabel id="cl" text="THIS IS A TEST OF A LABEL WITH BACKGROUND"
opaqueBackground="0x000088" />

</mx:Application>

[mabian]

Now THIS is what I call a complete answer!

Thanks a lot for taking the time to try and help, even though it's really sad
one has to do this kind of workaround due to the padding properties not
behaving as expected and documented...

- Mario