topic Re: dynamically change container size in ArcGIS API for Flex Questions

dynamically change container size

DebbieAlger — Thu, 19 Jan 2012 19:06:41 GMT

I hope I explain this properly. I have a left sided navigation bar that has several forms on it. I need the bottom (the largest) to shrink if the user either makes the page smaller or the resolution is smaller such as 1024 x 768. At this level the bottom is cut off.
I don't need a vertical scrollbar, I already have that. What I need is the entire container to shrink just like the Map Layers legend does.
Is this possible??

thanks,

Re: dynamically change container size

RobertScheitlin__GISP — Thu, 19 Jan 2012 19:29:19 GMT

Debbie,

If I understand you correctly than you just need to use top="0" bottom="0" left="0" width="100" or what ever the width you need is. This way the size of the panel is locked to the parent container.

Re: dynamically change container size

DebbieAlger — Fri, 20 Jan 2012 11:56:23 GMT

Hi Robert,

That did the trick, how do you guys get so Freakin Smart!

THanks so much,

Re: dynamically change container size

DebbieAlger — Fri, 20 Jan 2012 14:45:18 GMT

Robert,

I still have an issue here. What you gave me does help with the resizing. BUT, as shown in the attached picture. when the resizing gets to the point where it can't get any smaller, it should turn into a vertical scrollbar for the lower Results box. The scrollbar DOES show fine when more results are added and it gets to big, but it doesn't show when the viewer page is shrunk by the user.. I attached screen caps.
this is the entire code for the Results section...


   
   <mx:Box top="0" bottom="0" left="0" width="100%" height="100%"   paddingLeft="10" styleName="WidgetText"    horizontalScrollPolicy="off" borderStyle="solid" borderVisible="true"   visible="{wsArray !=null && wsArray.length>0}" >

    <s:Label    text=" " />
    <s:Label id="txtDG"    paddingLeft="5" fontWeight="bold" text="{resourceManager.getString('resources', 'results')}"   />

    <s:Label id="txtHeading"     paddingLeft="5" text="{resourceManager.getString('resources', 'dgHeading')} "     />
    <mx:Canvas width="100%"     >

     <mx:VBox     height="100%"   width="100%" horizontalScrollPolicy="off"   verticalScrollPosition="{this.width }" verticalScrollPolicy="auto" >

      <mx:Repeater dataProvider="{wsArray}" id="wRepeater"   >

       <mx:HBox verticalAlign="middle"    >
        <s:Label   text="             " />
        <s:Label   text="             " />

        <mx:Button click="remove(event )" buttonMode="true"   useHandCursor="true"   toolTip="{resourceManager.getString('resources', 'deleteWS')}"
             upSkin="@Embed('assets/images/delete.png')"
             overSkin="@Embed('assets/images/delete_selected.png')"
             downSkin="@Embed('assets/images/delete_selected.png')" width="20" height="20" />

        <s:Label   text="             " />

        <mx:Button click="Export(event )" buttonMode="true"   useHandCursor="true" toolTip="{resourceManager.getString('resources', 'exportWS')}"
             upSkin="@Embed('assets/images/export.PNG')"
             overSkin="@Embed('assets/images/export_selected.PNG')"
             downSkin="@Embed('assets/images/export_selected.PNG')" width="20" height="20" />

        <s:Label   text="             " />
        <s:Label   text="{wRepeater.currentItem.wsName}" buttonMode="true" useHandCursor="true" color="#0000FF" textDecoration="underline" styleName="WidgetText" toolTip="{resourceManager.getString('resources', 'zoomWS')}" click="zoomLocation(event)"      />

       </mx:HBox>

       <mx:HBox paddingLeft="15" >
       <mx:Image id="showCharacterize" click="btnShowCharacterize(event)" buttonMode="true" useHandCursor="true"   toolTip="{resourceManager.getString('resources', 'expand')}" source="{plusSign}" width="15" height="15"    />
       <s:Label   text="{resourceManager.getString('resources', 'characterize')}" styleName="WidgetText"   visible="true" />
       </mx:HBox>


       
        <mx:VBox id="displayDatagrid" paddingLeft="15"   height="0" visible="false" >

       <mx:DataGrid id="datagrid" dataProvider="{wRepeater.currentItem.gridData}"   rowCount="5" styleName="WidgetText" itemClick="dgClick(event)"   >
        <mx:columns>
         <mx:DataGridColumn headerText="Characterization"    dataField="charType" width="125"/>
         <mx:DataGridColumn headerText="Value"    dataField="charValue" width="75"/>
         <mx:DataGridColumn headerText="Select"   dataField="charChkBox" width="50"    itemRenderer="mx.controls.CheckBox" />
        </mx:columns>
       </mx:DataGrid>

       <mx:Box paddingLeft="10" paddingBottom="5">
          <s:Button     id="btnCharacterize" click="characterize(event)"   label="{resourceManager.getString('resources', 'selectChars')}" width="250" />
          </mx:Box>

        </mx:VBox>
      <s:Label    text=" " />
     </mx:Repeater>
      </mx:VBox>
    </mx:Canvas>
   </mx:Box>

thanks,

Re: dynamically change container size

RobertScheitlin__GISP — Sat, 11 Dec 2021 11:53:08 GMT

Debbie,

There is just so much here that is... Well it is hard for me to say exactly what is wrong. Here is my best guess

<mx:Canvas  width="100%" height="100%     >
   
     <mx:VBox     height="100%"   width="100%"  horizontalScrollPolicy="off"   verticalScrollPosition="{this.height}"  verticalScrollPolicy="auto"  >

Your use of mx boxes where they should be canvas (if you are still going to use mx) and labels that you are using as spacers instead of mx spacers... It hard to advise on code I just want to completely re-write. Don't take offense, I do understand this is your first flex app. But things like using mx repeaters when you could be using spark data groups and itemrenderes, there is so much more to learn.

Re: dynamically change container size

DebbieAlger — Mon, 23 Jan 2012 13:09:28 GMT

Thanks Rob,

that actually helped, and of course I am taking no offense. I appreciate your help. I had no idea what I was doing was wrong, have been
self-teaching by google searches. I will definitely start using spark tags.

CHeers,
Debbie