Re: [flexcoders] How to constrain child elements within a flexable parent?
On 5/2/07, Ian Skinner [EMAIL PROTECTED] wrote: Manish Jethani So this is what you want: ?xml version=1.0? … That is close to what I want. It worked fine when the label itself was constrained as I had been testing to simplify my code. But in my actual code, where the label is a child of a custom MXML VBox container it is not quite working. It is no longer stretching the container as it was without the minWidth, but it is not truncating to the width of the container either. Okay, let's talk MXML. mx:VBox id=outerBox width=200 height=100 mx:VBox id=innerBox width=100% height=100% mx:Label width=100% text=The quick brown fox jumped over the wall. / /mx:VBox /mx:VBox This causes innerBox to be wider than 200 px. and as a result outerBox gets a horizontal scrollbar. mx:VBox id=outerBox width=200 height=100 mx:VBox id=innerBox width=100% height=100% mx:Label width=100% minWidth=0 text=The quick brown fox jumped over the wall. / /mx:VBox /mx:VBox Here I've set minWidth on the label, and now the label is 200 px., truncated, and there is no scrollbar. Let me know if you've managed to simplify your code down to a small MXML example. I'm curious you're still getting scrollbar and/or no truncation of the label. -- Flexcoders Mailing List FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/flexcoders/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/flexcoders/join (Yahoo! ID required) * To change settings via email: mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] * To unsubscribe from this group, send an email to: [EMAIL PROTECTED] * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
RE: [flexcoders] How to constrain child elements within a flexable parent?
I'm curious you're still getting scrollbar and/or no truncation of the label. No, I do not have a small example, because the small example works as expected. It's when I expand the code into my actual application that the behavior changes slightly. I will say what I have is quite workable. I am just missing that bit of extra, nice decoration of the ellipses (...) when the text is larger then will fit into the container. The way it is currently working in my application, the text is 'cropped' at the edge of the container, but it is not 'truncated' to differentiate the addition of the ellipses and tool tip to show the entire text on mouse over. I have manually added the tool tip, but I don't know how to handle the ellipses, but I could probably live without them. Confidentiality Notice: This message including any attachments is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender and delete any copies of this message. ---BeginMessage--- On 5/2/07, Ian Skinner [EMAIL PROTECTED] wrote: Manish Jethani So this is what you want: ?xml version=1.0? … That is close to what I want. It worked fine when the label itself was constrained as I had been testing to simplify my code. But in my actual code, where the label is a child of a custom MXML VBox container it is not quite working. It is no longer stretching the container as it was without the minWidth, but it is not truncating to the width of the container either. Okay, let's talk MXML. mx:VBox id=outerBox width=200 height=100 mx:VBox id=innerBox width=100% height=100% mx:Label width=100% text=The quick brown fox jumped over the wall. / /mx:VBox /mx:VBox This causes innerBox to be wider than 200 px. and as a result outerBox gets a horizontal scrollbar. mx:VBox id=outerBox width=200 height=100 mx:VBox id=innerBox width=100% height=100% mx:Label width=100% minWidth=0 text=The quick brown fox jumped over the wall. / /mx:VBox /mx:VBox Here I've set minWidth on the label, and now the label is 200 px., truncated, and there is no scrollbar. Let me know if you've managed to simplify your code down to a small MXML example. I'm curious you're still getting scrollbar and/or no truncation of the label. -- Flexcoders Mailing List FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com Yahoo! Groups Links ---End Message---
RE: [flexcoders] How to constrain child elements within a flexable parent?
Yes, I did mean HBox, there is a VBox container around the label,
because once I have the layout figured out, there will be more then just
a label in it.
Here is the code that did not work for me:
mx:Repeater id=weekRows dataProvider={weekStartsAry}
mx:HBox width=100%
mx:Repeater id=dayCells dataProvider={parentApplication.daysAry}
startingIndex={weekRows.currentItem} count=7
mx:VBox width=14.25% height=200 horizontalScrollPolicy=off
mx:Label text={dayCells.currentItem} /
/mx:VBox
/mx:Repeater
/mx:HBox
/mx:Repeater
The last minute before I had to leave and catch my train home, I worked
up this solution:
mx:Label width={parentDocument.width/7} text={dayCells.currentItem}
includeInLayout=false truncateToFit=true /
This works, but I'm a bit confused about the parentDocument, I expected
that to refer to the VBox around the label, but apparently it is
referring to some higher container|control, can somebody provide any
insight to what element this is referring?
Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.
---BeginMessage---
Did you mean HBox instead of VBox?
From your description of the layout, it should just work. Can you post
a simple example that doesn't work?
On 4/28/07, Ian Skinner ian.skinner@ mailto:ian.skinner%40bloodsource.org
bloodsource.org wrote:
I have a Panel that I have sized to be constrained at 10 pixels top,
bottom, left and right so that it is flexible and based on the size of
the browser.
Inside this I have a VBox that I want to be 100% the width of the Panel.
Inside this I have Labels that I want to be 20% of the width of the
VBox, so that they are 5 of them evenly spaced across.
The text of this label maybe longer then can be displayed within the
above constraints, that is fine and I want it to be truncated if it can
not fit into the width equal to ~20% of the browser.
The trouble is that if I code all the above elements with percentages
the labels will expand and push the parent VBox beyond the width of the
Panel and I do not want this.
How can I constrain the widths of the Labels (or other
containers|controls I may want to put at this level) so that it will not
expand, without losing the flexibility of the overall design?
--
Flexcoders Mailing List
FAQ: http://groups.
http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-
http://www.mail-archive.com/flexcoders%40yahoogroups.com
archive.com/flexcoders%40yahoogroups.com
Yahoo! Groups Links
---End Message---
Re: [flexcoders] How to constrain child elements within a flexable parent?
On 4/30/07, Ian Skinner [EMAIL PROTECTED] wrote:
Yes, I did mean HBox, there is a VBox container around the label, because
once I have the layout figured out, there will be more then just a label in
it.
So this is what you want:
?xml version=1.0?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
xmlns=* layout=absolute
mx:Panel top=5 bottom=5 left=5 right=5
mx:HBox width=100% height=200
mx:Label minWidth=0 width=20% text=(1) Some very long
piece of text. /
mx:Label minWidth=0 width=20% text=(2) Some very long
piece of text. /
mx:Label minWidth=0 width=20% text=(3) Some very long
piece of text. /
mx:Label minWidth=0 width=20% text=(4) Some very long
piece of text. /
mx:Label minWidth=0 width=20% text=(5) Some very long
piece of text. /
/mx:HBox
/mx:Panel
/mx:Application
Note the setting of minWidth to 0.
percentage width/height is really a percentage of the remaining
width/height *after* all objects have got their minimum
widths/heights. In this case, the labels each want to have as much as
they need -- more than 20% of the HBox. So the parent container just
gives them how much the (say) they need, and, since after that there's
no space left, the percentage-based distribution doesn't kick in at
all.
So in such cases you need to set minWidth/minHeight explicitly. This
is not intuitive and one of the most frequent complaints about
percentage-based layouts in Flex.
The last minute before I had to leave and catch my train home, I worked up
this solution:
mx:Label width={parentDocument.width/7} text={dayCells.currentItem}
includeInLayout=false truncateToFit=true /
Why are you setting includeInLayout to false? That's not what you
want, really. Try the solution I suggested and you should be okay.
This works, but I'm a bit confused about the parentDocument, I expected that
to refer to the VBox around the label, but apparently it is referring to
some higher container|control, can somebody provide any insight to what
element this is referring?
parentDocument refers to the parent MXML document. In the application,
it refers to the application class. In an MXML component, it refers to
the root of the MXML document. The documentation for UIComponent
explains this in a better way.
RE: [flexcoders] How to constrain child elements within a flexable parent?
Thanks. I had just asked this again, providing some code showing this.
I will now give your solution a try.
Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.
---BeginMessage---
On 4/30/07, Ian Skinner ian.skinner@ mailto:ian.skinner%40bloodsource.org
bloodsource.org wrote:
Yes, I did mean HBox, there is a VBox container around the label, because
once I have the layout figured out, there will be more then just a label in
it.
So this is what you want:
?xml version=1.0?
mx:Application xmlns:mx=http://www.adobe. http://www.adobe.com/2006/mxml
com/2006/mxml
xmlns=* layout=absolute
mx:Panel top=5 bottom=5 left=5 right=5
mx:HBox width=100% height=200
mx:Label minWidth=0 width=20% text=(1) Some very long
piece of text. /
mx:Label minWidth=0 width=20% text=(2) Some very long
piece of text. /
mx:Label minWidth=0 width=20% text=(3) Some very long
piece of text. /
mx:Label minWidth=0 width=20% text=(4) Some very long
piece of text. /
mx:Label minWidth=0 width=20% text=(5) Some very long
piece of text. /
/mx:HBox
/mx:Panel
/mx:Application
Note the setting of minWidth to 0.
percentage width/height is really a percentage of the remaining
width/height *after* all objects have got their minimum
widths/heights. In this case, the labels each want to have as much as
they need -- more than 20% of the HBox. So the parent container just
gives them how much the (say) they need, and, since after that there's
no space left, the percentage-based distribution doesn't kick in at
all.
So in such cases you need to set minWidth/minHeight explicitly. This
is not intuitive and one of the most frequent complaints about
percentage-based layouts in Flex.
The last minute before I had to leave and catch my train home, I worked up
this solution:
mx:Label width={parentDocument.width/7} text={dayCells.currentItem}
includeInLayout=false truncateToFit=true /
Why are you setting includeInLayout to false? That's not what you
want, really. Try the solution I suggested and you should be okay.
This works, but I'm a bit confused about the parentDocument, I expected that
to refer to the VBox around the label, but apparently it is referring to
some higher container|control, can somebody provide any insight to what
element this is referring?
parentDocument refers to the parent MXML document. In the application,
it refers to the application class. In an MXML component, it refers to
the root of the MXML document. The documentation for UIComponent
explains this in a better way.
---End Message---
RE: [flexcoders] How to constrain child elements within a flexable parent?
Manish Jethani
So this is what you want:
?xml version=1.0?
...
That is close to what I want. It worked fine when the label itself was
constrained as I had been testing to simplify my code. But in my actual
code, where the label is a child of a custom MXML VBox container it is
not quite working. It is no longer stretching the container as it was
without the minWidth, but it is not truncating to the width of the
container either. It is causing the entire container to use scroll
bars. Using horizontalScrollPolicy=off will suppress the scroll bars,
but the labels are not truncated with the nice ellipses (...) and
automatic tool tip with the full string, they are just cutoff.
Close, so close.
Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.
---BeginMessage---
On 4/30/07, Ian Skinner ian.skinner@ mailto:ian.skinner%40bloodsource.org
bloodsource.org wrote:
Yes, I did mean HBox, there is a VBox container around the label, because
once I have the layout figured out, there will be more then just a label in
it.
So this is what you want:
?xml version=1.0?
mx:Application xmlns:mx=http://www.adobe. http://www.adobe.com/2006/mxml
com/2006/mxml
xmlns=* layout=absolute
mx:Panel top=5 bottom=5 left=5 right=5
mx:HBox width=100% height=200
mx:Label minWidth=0 width=20% text=(1) Some very long
piece of text. /
mx:Label minWidth=0 width=20% text=(2) Some very long
piece of text. /
mx:Label minWidth=0 width=20% text=(3) Some very long
piece of text. /
mx:Label minWidth=0 width=20% text=(4) Some very long
piece of text. /
mx:Label minWidth=0 width=20% text=(5) Some very long
piece of text. /
/mx:HBox
/mx:Panel
/mx:Application
Note the setting of minWidth to 0.
percentage width/height is really a percentage of the remaining
width/height *after* all objects have got their minimum
widths/heights. In this case, the labels each want to have as much as
they need -- more than 20% of the HBox. So the parent container just
gives them how much the (say) they need, and, since after that there's
no space left, the percentage-based distribution doesn't kick in at
all.
So in such cases you need to set minWidth/minHeight explicitly. This
is not intuitive and one of the most frequent complaints about
percentage-based layouts in Flex.
The last minute before I had to leave and catch my train home, I worked up
this solution:
mx:Label width={parentDocument.width/7} text={dayCells.currentItem}
includeInLayout=false truncateToFit=true /
Why are you setting includeInLayout to false? That's not what you
want, really. Try the solution I suggested and you should be okay.
This works, but I'm a bit confused about the parentDocument, I expected that
to refer to the VBox around the label, but apparently it is referring to
some higher container|control, can somebody provide any insight to what
element this is referring?
parentDocument refers to the parent MXML document. In the application,
it refers to the application class. In an MXML component, it refers to
the root of the MXML document. The documentation for UIComponent
explains this in a better way.
---End Message---
Re: [flexcoders] How to constrain child elements within a flexable parent?
Did you mean HBox instead of VBox? From your description of the layout, it should just work. Can you post a simple example that doesn't work? On 4/28/07, Ian Skinner [EMAIL PROTECTED] wrote: I have a Panel that I have sized to be constrained at 10 pixels top, bottom, left and right so that it is flexible and based on the size of the browser. Inside this I have a VBox that I want to be 100% the width of the Panel. Inside this I have Labels that I want to be 20% of the width of the VBox, so that they are 5 of them evenly spaced across. The text of this label maybe longer then can be displayed within the above constraints, that is fine and I want it to be truncated if it can not fit into the width equal to ~20% of the browser. The trouble is that if I code all the above elements with percentages the labels will expand and push the parent VBox beyond the width of the Panel and I do not want this. How can I constrain the widths of the Labels (or other containers|controls I may want to put at this level) so that it will not expand, without losing the flexibility of the overall design? -- Flexcoders Mailing List FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com Yahoo! Groups Links
