1 Reply Latest reply on Jun 25, 2011 8:13 AM by Lee Burrows

    simple scroll question

    joshua_shizny

      Well, I'm a total newby to Flex 4 and this scrollbar stuff has me scratching my head.  I can't, for the life of me get them to work as I want them to.  Here is my super simple application mxml

      [CODE]

      <?xml version="1.0" encoding="utf-8"?>

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

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

         xmlns:mx="library://ns.adobe.com/flex/mx"

         xmlns:views="views.*"

         width="100%" height=100%>

      <fx:Declarations>

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

      </fx:Declarations>

      <mx:TabNavigator x="0" y="0" width="100%" height="100%">

      <s:NavigatorContent width="100%" height="100%" label="Customer Info">

      <s:Scroller>

      <s:HGroup id="userInfoGroup" width="100%">

      <views:BillToForm>

      </views:BillToForm>

      <views:ShipToForm>

      </views:ShipToForm>

      </s:HGroup>

      </s:Scroller>

      </s:NavigatorContent>

      <s:NavigatorContent width="100%" label="Products">

      </s:NavigatorContent>

      </mx:TabNavigator>

      </s:Application>

      [/CODE]

       

      and here is one of the views (BillToForm.mxml)

      [CODE]

      <?xml version="1.0" encoding="utf-8"?>

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

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

      xmlns:mx="library://ns.adobe.com/flex/mx" width="50%">

      <fx:Declarations>

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

      </fx:Declarations>

      <s:Form id="billToForm" width="100%">

      <s:FormHeading label="Bill To:"/>

      <s:FormItem label="First Name">

      <s:TextInput/>

      </s:FormItem>

      <s:FormItem label="Last Name">

      <s:TextInput/>

      </s:FormItem>

      <s:FormItem label="Email Address">

      <s:TextInput/>

      </s:FormItem>

      <s:FormItem label="Address 1">

      <s:TextInput/>

      </s:FormItem>

      <s:FormItem label="Address 2">

      <s:TextInput/>

      </s:FormItem>

      <s:FormItem label="Address 3">

      <s:TextInput/>

      </s:FormItem>

      <s:FormItem label="City">

      <s:TextInput/>

      </s:FormItem>

      <s:FormItem label="State">

      <s:TextInput/>

      </s:FormItem>

      <s:FormItem label="Zip">

      <s:TextInput/>

      </s:FormItem>

      <s:FormItem label="Country">

      <s:TextInput/>

      </s:FormItem>

      <s:FormItem label="Phone">

      <s:TextInput/>

      </s:FormItem>

      <s:FormItem label="Notes">

      <s:TextArea/>

      </s:FormItem>

      </s:Form>

      </s:Group>

      [/CODE]

       

      What is happening is that my application is filling the entire browser window with no scroll bar showing up.  I've also tried adding in a VScrollBar component and giving it a viewport of userInfoGroup.  The only way I can get the scrollbar to kinda work is if I put an explicit height on the HGroup, but I don't want to, I want everything to fill the entire screen and then if there is not enough vertical room for scrollbars to appear so the user can scroll the forms.  Any help would be awesome.

       

       

      Josh