Question

In Flex 4.0, I have a project with a videodisplay, and below it some controls that I’ve created (play/pause button, HSlider for showing progress, some volume controls…)

The problem arises when the flash is displayed in a window that is too small to fit all controls at their desired width. What I see is that some controls are pushed to the right, out of sight. (Maybe it’s because they are in a custom container that acts as a window, but that’s needed functionality).

I want to designate the HSlider as having flexible width, so when the user creates a small window, the items in the control bar are still visible, and the HSlider is compressed enough to make that happen…

Cheers!

Edit: the code for my window (it’s the VBox that I would like to have variable-sized):

<ns1:CollapsableTitleWindow x="294" y="36.65" backgroundColor="#000000" width="436" height="373" id="wnd" title="test" allowClose="false">
    <mx:VideoDisplay width="100%" height="100%" id="vd" autoPlay="false" volume="1"/>
    <mx:ControlBar id="ctrlbarLiveVideo1" width="100%">
        <mx:Button width="30" height="22" id="btnPlay" click="{doplay();}" icon="{imgPlayButton}"/>
        <mx:VBox verticalGap="1" horizontalAlign="right">
            <mx:HSlider id="slider" width="100%" invertThumbDirection="true" maximum="{vd.totalTime}" minimum="0" tickInterval="{vd.totalTime/10}" value="{Number(vd.playheadTime)}" />
            <mx:Label text="{sec2hms(Number(vd.playheadTime))} / {sec2hms(Number(slider.maximum))}"/>
        </mx:VBox>

        <mx:HBox id="box" horizontalGap="1" verticalAlign="middle">
            <mx:Label id="lblVolume" text = "{String(Math.round(vd.volume*100))+'%'}"/>
            <mx:Button label="-" id="btnless" width="34" height="22" verticalGap="0" labelPlacement="top" labelVerticalOffset="0" click = "{vd.volume -= 0.10}"/>
            <mx:Button label="+" id="btnmore" width="34" height="22" verticalGap="0" labelPlacement="top" labelVerticalOffset="0" click = "{vd.volume += 0.10}"/>   
        </mx:HBox>
    </mx:ControlBar>
</ns1:CollapsableTitleWindow>

Produces this screenshot:

Answer 1

Apparently the answer was: set the minWidth of the HSlider explicitly to 0:

<mx:HSlider minWidth="0" id="slider" width="100%" ... />

And also make the VBox width=”100%”: (thanks to code90)

<mx:VBox width="100%" verticalGap="1" horizontalAlign="right">