Re: [flexcoders] Adjacent mx:Label controls and spacing between them?
Hey Chris, welcome!
The easiest solution would be to change the HBox spacing to -6, and
add the spaces in the text, like so:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Script
![CDATA[
[Bindable]
public var firstNumber:int = 42;
[Bindable]
public var secondNumber:int = 99;
]]
/mx:Script
mx:HBox horizontalGap=-6
mx:Label text=The first number is paddingRight=0 /
mx:Label text={firstNumber} paddingLeft=0 paddingRight=0 /
mx:Label text= and the second number is paddingLeft=0
paddingRight=0 /
mx:Label text={secondNumber} paddingLeft=0 paddingRight=0 /
mx:Label text=. paddingLeft=0 /
/mx:HBox
/mx:Application
On Jul 30, 2008, at 7:08 AM, Chris W. Rea wrote:
Hi flexcoders. This is my first post, so hello! I'm relatively new
to Flex, and I am using Flex Builder 3.
I'm trying to lay out some text with Label controls, and this issue is
confusing me. Basically, I want to display a string such as The
first number is 42 and the second number is 99. The numbers
themselves vary and areto be conditionally styled. In fact, the
values are to be controlled by two sliders, and I want an effect such
that when the slider is dragged, the numbers change colour until the
slider is released.
I had originally laid out the text using a single mx:Label control and
setting htmlText within the string to:
mx:Label htmlText=The first number is {firstNumber} and the second
number is {secondNumber}./
However, I'd like more control over the styling of those bound
numbers, individually. So, I am attempting to factor the string into
multiple Label controls (as in the snippet below.)
However, I can't seem to get the space between the last number and the
period to disappear. I thought by setting the HBox horizontalGap to
zero and each Label's paddingLeft and paddingRight to zero that there
should be no such space, but that's not the case. I imagine I am
misunderstanding how the label widths are calculated and being
rendered, and overlooking something obvious.
So, is there a way to make the adjacent mx:Labels render similar to
the single mx:Label above? Or, is there a better way to accomplish
what I want as I described above? Thank you.
--- 8 code follows 8 ---
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Script
![CDATA[
[Bindable]
public var firstNumber:int = 42;
[Bindable]
public var secondNumber:int = 99;
]]
/mx:Script
mx:HBox horizontalGap=0
mx:Label text=The first number is paddingRight=0 /
mx:Label text={firstNumber} paddingLeft=0 paddingRight=0 /
mx:Label text=and the second number is paddingLeft=0
paddingRight=0 /
mx:Label text={secondNumber} paddingLeft=0 paddingRight=0 /
mx:Label text=. paddingLeft=0 /
/mx:HBox
/mx:Application
--- 8 end code 8 ---
Regards,
Chris W. Rea
[EMAIL PROTECTED]
Re: [flexcoders] Adjacent mx:Label controls and spacing between them?
Hi Jeremy. Thanks! That did the trick. Brilliant - I hadn't thought
about a negative gap as I was thinking *inside* the box. :-) I
expected there would be a positive-valued property or style that I
would zero out. I'd love to know what that -6 is compensating for,
though. There is clearly additional padding for the rendering of the
Label that is not represented by paddingLeft, paddingRight... an
internal implementation detail?
Anyway, thank you!
Regards,
Chris W. Rea
[EMAIL PROTECTED]
On Wed, Jul 30, 2008 at 10:18 AM, Flex Frenzy [EMAIL PROTECTED] wrote:
Hey Chris, welcome!
The easiest solution would be to change the HBox spacing to -6, and add the
spaces in the text, like so:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute
mx:Script
![CDATA[
[Bindable]
public var firstNumber:int = 42;
[Bindable]
public var secondNumber:int = 99;
]]
/mx:Script
mx:HBox horizontalGap=-6
mx:Label text=The first number is paddingRight=0 /
mx:Label text={firstNumber} paddingLeft=0 paddingRight=0 /
mx:Label text= and the second number is paddingLeft=0 paddingRight=0
/
mx:Label text={secondNumber} paddingLeft=0 paddingRight=0 /
mx:Label text=. paddingLeft=0 /
/mx:HBox
/mx:Application
On Jul 30, 2008, at 7:08 AM, Chris W. Rea wrote:
Hi flexcoders. This is my first post, so hello! I'm relatively new
to Flex, and I am using Flex Builder 3.
I'm trying to lay out some text with Label controls, and this issue is
confusing me. Basically, I want to display a string such as The
first number is 42 and the second number is 99. The numbers
themselves vary and areto be conditionally styled. In fact, the
values are to be controlled by two sliders, and I want an effect such
that when the slider is dragged, the numbers change colour until the
slider is released.
I had originally laid out the text using a single mx:Label control and
setting htmlText within the string to:
mx:Label htmlText=The first number is {firstNumber} and the second
number is {secondNumber}./
However, I'd like more control over the styling of those bound
numbers, individually. So, I am attempting to factor the string into
multiple Label controls (as in the snippet below.)
However, I can't seem to get the space between the last number and the
period to disappear. I thought by setting the HBox horizontalGap to
zero and each Label's paddingLeft and paddingRight to zero that there
should be no such space, but that's not the case. I imagine I am
misunderstanding how the label widths are calculated and being
rendered, and overlooking something obvious.
So, is there a way to make the adjacent mx:Labels render similar to
the single mx:Label above? Or, is there a better way to accomplish
what I want as I described above? Thank you.
--- 8 code follows 8 ---
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute
mx:Script
![CDATA[
[Bindable]
public var firstNumber:int = 42;
[Bindable]
public var secondNumber:int = 99;
]]
/mx:Script
mx:HBox horizontalGap=0
mx:Label text=The first number is paddingRight=0 /
mx:Label text={firstNumber} paddingLeft=0 paddingRight=0 /
mx:Label text=and the second number is paddingLeft=0 paddingRight=0
/
mx:Label text={secondNumber} paddingLeft=0 paddingRight=0 /
mx:Label text=. paddingLeft=0 /
/mx:HBox
/mx:Application
--- 8 end code 8 ---
Regards,
Chris W. Rea
[EMAIL PROTECTED]
[...]
Re: [flexcoders] Adjacent mx:Label controls and spacing between them?
Must be internal, you will see that -6 for most all of the rendered
items.
Jeremy
On Jul 30, 2008, at 9:41 AM, Chris W. Rea wrote:
Hi Jeremy. Thanks! That did the trick. Brilliant - I hadn't thought
about a negative gap as I was thinking *inside* the box. :-) I
expected there would be a positive-valued property or style that I
would zero out. I'd love to know what that -6 is compensating for,
though. There is clearly additional padding for the rendering of the
Label that is not represented by paddingLeft, paddingRight... an
internal implementation detail?
Anyway, thank you!
Regards,
Chris W. Rea
[EMAIL PROTECTED]
On Wed, Jul 30, 2008 at 10:18 AM, Flex Frenzy
[EMAIL PROTECTED] wrote:
Hey Chris, welcome!
The easiest solution would be to change the HBox spacing to -6,
and add the
spaces in the text, like so:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Script
![CDATA[
[Bindable]
public var firstNumber:int = 42;
[Bindable]
public var secondNumber:int = 99;
]]
/mx:Script
mx:HBox horizontalGap=-6
mx:Label text=The first number is paddingRight=0 /
mx:Label text={firstNumber} paddingLeft=0 paddingRight=0 /
mx:Label text= and the second number is paddingLeft=0
paddingRight=0
/
mx:Label text={secondNumber} paddingLeft=0 paddingRight=0 /
mx:Label text=. paddingLeft=0 /
/mx:HBox
/mx:Application
On Jul 30, 2008, at 7:08 AM, Chris W. Rea wrote:
Hi flexcoders. This is my first post, so hello! I'm relatively new
to Flex, and I am using Flex Builder 3.
I'm trying to lay out some text with Label controls, and this
issue is
confusing me. Basically, I want to display a string such as The
first number is 42 and the second number is 99. The numbers
themselves vary and areto be conditionally styled. In fact, the
values are to be controlled by two sliders, and I want an effect
such
that when the slider is dragged, the numbers change colour until the
slider is released.
I had originally laid out the text using a single mx:Label control
and
setting htmlText within the string to:
mx:Label htmlText=The first number is {firstNumber} and the second
number is {secondNumber}./
However, I'd like more control over the styling of those bound
numbers, individually. So, I am attempting to factor the string into
multiple Label controls (as in the snippet below.)
However, I can't seem to get the space between the last number and
the
period to disappear. I thought by setting the HBox horizontalGap to
zero and each Label's paddingLeft and paddingRight to zero that
there
should be no such space, but that's not the case. I imagine I am
misunderstanding how the label widths are calculated and being
rendered, and overlooking something obvious.
So, is there a way to make the adjacent mx:Labels render similar to
the single mx:Label above? Or, is there a better way to accomplish
what I want as I described above? Thank you.
--- 8 code follows 8 ---
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Script
![CDATA[
[Bindable]
public var firstNumber:int = 42;
[Bindable]
public var secondNumber:int = 99;
]]
/mx:Script
mx:HBox horizontalGap=0
mx:Label text=The first number is paddingRight=0 /
mx:Label text={firstNumber} paddingLeft=0 paddingRight=0 /
mx:Label text=and the second number is paddingLeft=0
paddingRight=0
/
mx:Label text={secondNumber} paddingLeft=0 paddingRight=0 /
mx:Label text=. paddingLeft=0 /
/mx:HBox
/mx:Application
--- 8 end code 8 ---
Regards,
Chris W. Rea
[EMAIL PROTECTED]
[...]
RE: [flexcoders] Adjacent mx:Label controls and spacing between them?
an internal implementation detail?
Yes, TextField (used inside a Label) puts a few pixels of padding around
text.
You should consider using a single Label with multi-styled text, which
you can set with the htmlText property.
Gordon Smith
Adobe Flex SDK Team
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Flex Frenzy
Sent: Wednesday, July 30, 2008 11:30 AM
To: flexcoders@yahoogroups.com
Subject: Re: [flexcoders] Adjacent mx:Label controls and spacing between
them?
Must be internal, you will see that -6 for most all of the rendered
items.
Jeremy
On Jul 30, 2008, at 9:41 AM, Chris W. Rea wrote:
Hi Jeremy. Thanks! That did the trick. Brilliant - I hadn't thought
about a negative gap as I was thinking *inside* the box. :-) I
expected there would be a positive-valued property or style that I
would zero out. I'd love to know what that -6 is compensating for,
though.! There is clearly additional padding for the rendering of the
Label that is not represented by paddingLeft, paddingRight... an
internal implementation detail?
Anyway, thank you!
Regards,
Chris W. Rea
[EMAIL PROTECTED] mailto:chris.w.rea%40gmail.com
On Wed, Jul 30, 2008 at 10:18 AM, Flex Frenzy [EMAIL PROTECTED]
mailto:jeremy%40flexfrenzy.com wrote:
Hey Chris, welcome!
The easiest solution would be to change the HBox spacing to -6, and
add the
spaces in the text, like so:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml
http://www.adobe.com/2006/mxml layout=absolute
mx:Script
![CDATA[
[Bindable]
public var firstNumber:int = 42;
[Bindable]
public var secondNumber:int = 99;
]]
/mx:Script
mx:HBox hor! izontalGap=-6
mx:Label text=The first number! is pa ddingRight=0 /
mx:Label text={firstNumber} paddingLeft=0 paddingRight=0 /
mx:Label text= and the second number is paddingLeft=0
paddingRight=0
/
mx:Label text={secondNumber} paddingLeft=0 paddingRight=0 /
mx:Label text=. paddingLeft=0 /
/mx:HBox
/mx:Application
On Jul 30, 2008, at 7:08 AM, Chris W. Rea wrote:
Hi flexcoders. This is my first post, so hello! I'm relatively new
to Flex, and I am using Flex Builder 3.
I'm trying to lay out some text with Label controls, and this issue is
confusing me. Basically, I want to display a string such as The
first number is 42 and the second number is 99. The numbers
themselves vary and areto be conditionally styled. In fact, the
values are to be controlled by two sliders, and I want an effect such
that when the slider is dragged, the nu! mbers change colour until the
slider is released.
I had originally laid out the text using a single mx:Label control and
setting htmlText within the string to:
mx:Label htmlText=The first number is {firstNumber} and the second
number is {secondNumber}./
However, I'd like more control over the styling of those bound
numbers, individually. So, I am attempting to factor the string into
multiple Label controls (as in the snippet below.)
However, I can't seem to get the space between the last number and the
period to disappear. I thought by setting the HBox horizontalGap to
zero and each Label's paddingLeft and paddingRight to zero that there
should be no such space, but that's not the case. I imagine I am
misunderstanding how the label widths are calculated and being
rendered, and overlooking something obvious.
So, is there a way to make the adjacent mx:Labels render simil! ar to
the single mx:Label above? Or, is there a better wa! y to acc omplish
what I want as I described above? Thank you.
--- 8 code follows 8 ---
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml
http://www.adobe.com/2006/mxml layout=absolute
mx:Script
![CDATA[
[Bindable]
public var firstNumber:int = 42;
[Bindable]
public var secondNumber:int = 99;
]]
/mx:Script
mx:HBox horizontalGap=0
mx:Label text=The first number is paddingRight=0 /
mx:Label text={firstNumber} paddingLeft=0 paddingRight=0 /
mx:Label text=and the second number is paddingLeft=0
paddingRight=0
/
mx:Label text={secondNumber} paddingLeft=0 paddingRight=0 /
mx:Label text=. paddingLeft=0 /
/mx:HBox
/mx:Application
! --- 8 end code 8 ---
Regards,
Chris W. Rea
[EMAIL PROTECTED] mailto:chris.w.rea%40gmail.com
[...]
