Flex MXML Layout Issue

0
votes

So what I want is the ToggleSwitch on the left and a Button on the right. When the Screen is too small, I want the Button to get smaller and show some "...". So I used:

<s:Group width="100%">
    <s:layout>
        <s:HorizontalLayout verticalAlign="middle"/>
    </s:layout>
    <s:ToggleSwitch />
    <s:Spacer width="100%"/>
    <s:Button label="TestTestTestTestTest"/>
</s:Group>

This works fine, until the Screen is so small that the entire label text from the button doens't fit. Then both components are floating left and right outside of the screen.

So I tried it by using a basic layout:

<s:Group width="100%">
    <s:ToggleSwitch left="0" />
    <s:Button right="0" label="TestTestTestTestTest"/>
</s:Group>

Doens't work either. When screen is too small the button is floating over the toggleswitch. So how can I get this to work?

1
apache-flexlayoutmobilemxml

1 Answers

2
votes

You're probably almost there, for one if you want side by side, just start with an HGroup and to protect against layout "border violations" of it's parent, turn on the clipAndEnableScrolling property.

<s:HGroup width="100%" clipAndEnableScrolling="true">
    <s:ToggleSwitch />
    <s:Rect width="100%" />
    <s:Button label="TestTestTestTestTest"/>
</s:HGroup>