1 Reply Latest reply on Oct 10, 2010 9:45 PM by Flex harUI

    minWidth not working with Scroller container

    JonathanSWFt

      So, this might be a dumb question from a relative Flex newbie, but I haven't been able to figure it out for the last few hours, after trying many different combinations.  In a scrolling Group, I'm able to get the vertical scrolling to behave exactly as I want it to, but the horizontal scrolling just doesn't seem to function no matter what I do.

       

      Examples from Design view:

       

      vScrolling.jpg

      As you can see, the content is larger than minHeight of 800, so the scrollbar appears...hooray!  Now, for the horizontal scrolling....

       

      hScroll_fail.jpg

      Horrible, ugly mega-fail.  (Note also that only some of the text areas actually scale, despite the fact that they're all coded identically...what's up with that?!).  I do realize that each of the nested border containers have children with fixed heights, and I'm using fluid widths throughout this layout..which may account for the different behavior.  But isn't that the whole point of the minWidth property?  To create a limit at which the scrollbars will appear?  I know I could force the Scroller size to 300, but then it would limit the size of the viewport to a maximum of 300, which is the last thing I want.  Basically, I need some help in understanding how the new Scroller system works with fluid layouts.  In MX, minWidth/minHeight just worked....*sigh*

       

      Can anyone help me fix this?  Please stop me from losing faith in Abode's ability to create APIs that function inituitively.

       

      Here's the code:

       

      <s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"

      xmlns:s="library://ns.adobe.com/flex/spark"

      xmlns:mx="library://ns.adobe.com/flex/mx" dropShadowVisible="false"  width="100%" height="100%">

      <fx:Declarations>

      <!-- Place non-visual elements (e.g., services, value objects) here -->

      </fx:Declarations>

      <s:Scroller horizontalScrollPolicy="on" verticalScrollPolicy="auto" width="100%" height="100%">

      <s:Group width="100%" height="100%" minHeight="800" minWidth="300">

      <s:layout>

      <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" gap="20"/>

      </s:layout>

       

      <s:BorderContainer id="choiceContainer" width="100%" minWidth="300" height="150" cornerRadius="10" backgroundColor="0xDDDDDD" borderWeight="0" dropShadowVisible="false">

      <s:layout>

      <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="20" paddingBottom="10" gap="10"/>

      </s:layout>

      <s:Label text="Learner Choice" fontWeight="bold" fontSize="14"/>

      <s:HGroup width="100%" height="20" verticalAlign="middle" horizontalAlign="center">

      <s:Label text="Choice Label" width="100" textAlign="right"/>

      <s:TextArea height="100%" width="100%" id="choiceLabelField" editable="true"/>

      </s:HGroup>

      <s:HGroup width="100%" height="50" verticalAlign="middle" horizontalAlign="center">

      <s:Label text="Full Choice" width="100" textAlign="right"/>

      <s:TextArea width="100%" height="100%" id="choiceBodyField"/>

      </s:HGroup>

      </s:BorderContainer>

       

      <s:BorderContainer id="resultsContainer" width="100%" minWidth="300" height="275" cornerRadius="10" backgroundColor="0xDDDDDD" borderWeight="0" dropShadowVisible="false">

      <s:layout>

      <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="20" paddingBottom="10" gap="10"/>

      </s:layout>

      <s:Label text="Outcomes"  fontWeight="bold" fontSize="14"/>

       

      <s:HGroup width="100%" height="50" verticalAlign="middle" horizontalAlign="center">

      <s:Label text="Coach Feedback" width="100" textAlign="right"/>

      <s:TextArea width="100%" height="100%" id="feedbackBodyField"/>

      </s:HGroup>

      <s:HGroup width="100%" height="50" verticalAlign="middle" horizontalAlign="center">

      <s:Label text="Customer Says" width="100" textAlign="right"/>

      <s:TextArea width="100%" height="100%" id="saysField"/>

      </s:HGroup>

      <s:HGroup width="100%" height="50" verticalAlign="middle" horizontalAlign="center">

      <s:Label text="Customer Thinks" width="100" textAlign="right"/>

      <s:TextArea width="100%" height="100%" id="thinksField"/>

      </s:HGroup>

      <s:HGroup width="100%" height="20" verticalAlign="middle" horizontalAlign="center" gap="20">

      <s:Label text="Satisfaction Change: "/>

      <s:NumericStepper id="satisfactionStepper" maximum="100" minimum="-100"/>

      <s:Label text="Expression: "/>

      <s:DropDownList id="expressionDropDown" width="100"/>

      </s:HGroup>

      </s:BorderContainer>

       

      <s:BorderContainer id="nextActionContainer" width="100%" minWidth="300"  height="130" cornerRadius="10" backgroundColor="0xDDDDDD" borderWeight="0" dropShadowVisible="false">

      <s:layout>

      <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="20" paddingBottom="20" gap="20"/>

      </s:layout>

      <s:Label text="Next Action"  fontWeight="bold" fontSize="14"/>

      <s:HGroup width="100%" height="20" verticalAlign="middle" horizontalAlign="center">

      <s:Label text="Link to " width="100" textAlign="right"/>

      <s:DropDownList id="linkToDropDown" width="100%"/>

      </s:HGroup>

      <s:HGroup width="100%" height="20" verticalAlign="middle" horizontalAlign="center" gap="20">

      <s:CheckBox id="alertCheckBox" label="Show pop-up alert before learner advances: "/>

      <s:Button id="editAlertButton" label="Edit Alert" enabled="{alertCheckBox.selected}"/>

      </s:HGroup>

      </s:BorderContainer>

      </s:Group>

      </s:Scroller>

      </s:BorderContainer>