Flex has always worked this way, and it has bugged people for just as long.
When you specify percentage width on a component, the component defaults
to a minWidth that is the measuredWidth of the component. The layout
logic cares about minWidth and will size the component accordingly. And
then if the container is set to a fixed width, then the component will
exceed the container's width.
You can set minWidth to some other number if you want.
-Alex
On 12/10/13 6:59 AM, "BorekB" <bor...@gmail.com> wrote:
>Just came across a weird behavior. I have a custom skinnable component
>placed
>inside some other container and its width is set to 100%. This means that
>my
>component should always have the same width as the parent container.
>However, when I create a skin for this component that contains something
>larger than the space available, the whole component would be larger than
>100%, thus ignoring what I always though were quite simple layout rules of
>Flex.
>
>An example: my skinnable component is called MainView and it is placed in
>an
>application like this:
>
><s:WindowedApplication width="500" height="500">
> <test:MainView width="100%" height="100%" />
></s:WindowedApplication>
>
>The skin for MainView just draws the red border around the component:
>
><s:Skin Š>
> <fx:Metadata>[HostComponent("test.MainView")]</fx:Metadata>
>
> <s:Rect top="0" right="0" bottom="0" left="0">
> <s:stroke>
> <s:SolidColorStroke color="red" weight="2" />
> </s:stroke>
> </s:Rect>
>
></s:Skin>
>
>If I run the app now, all is fine, however, this is what causes trouble
>(not
>the added Spacer at the bottom):
>
><s:Skin Š>
> <fx:Metadata>[HostComponent("test.MainView")]</fx:Metadata>
>
> <s:Rect top="0" right="0" bottom="0" left="0">
> <s:stroke>
> <s:SolidColorStroke color="red" weight="2" />
> </s:stroke>
> </s:Rect>
>
> <s:Spacer width="800" />
>
></s:Skin>
>
>With this skin in place, the MainView will have an "incorrect" width of
>800
>pixels and the red border would not be visible at the right edge of the
>component (the app window is set to be 500px wide). I *think* this is
>incorrect because when MainView doesn't use percent width but rather
>something like width=200, this value beats whatever is defined in skin and
>that's how I always thought layout worked in Flex.
>
>What are your initial thoughts? Maybe I'm just missing something simple
>here? Note that I don't want to get into the debate whether skins should
>or
>should not contain something that possibly exceeds component boundaries
>but
>rather focus on the fact that setting <MainView width=PIXELS> works while
><MainView width=PERCENT> doesn't. Does this sound like a bug to you? Or is
>this somehow justified / intended?
>
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/Spark-and-percent-wid
>th-unexpected-behavior-tp33190.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.
