4 Replies Latest reply on Jun 15, 2009 2:19 AM by *Prashant Shelke*

    Why doesn't flex app height expand beyond browser height?

    xandesign

      Hi,

       

      I have a flex app which lets a user display data from a db as either a datagrid or a chart but it's not displaying in the web browser properly. The problem is that when the user changes between the datagrid and the chart, scrollbars appear vertically and horizontally and the user has to scroll to see the data properly.

       

      How the app works:

      A user selects a date and enters a duration of days and clicks search wich pulls data back from the database. By default the data is then displayed in a datagrid. The user can choose to see the data represented by various chart types or as a datagrid by clicking the 'changeView()' button which opens a popup component for the user to select chart type. Once the user has selected the chart type, the popup closes and in actionscript the datagrid is removed using MessageCount.removeChildAt(1); and then the chart component is added using MessageCount.addChildAt(1); The datagrid disapears and the chart appears as expected but the problem is now scrollbars have appeared on either the canvas or vbox component, I'm not sure which, and the user has to scroll to see the datagrid or the chart.

       

      Is there anyway to get the flex app to expand it's height in the web browser, just like a normal web page does when the content is long, such as an article or something?

       

      My app code is shown below.

       

      Thanks in advance,

       

      Xander

       

      Application

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" layout="absolute" xmlns:xgc="http://localhost/xgtools" creationComplete="doAppInit()">
          <mx:Style source="chartbox.css"/>
          <mx:Script source="chartbox.as"/>

       

          <mx:VBox width="100%" height="100%" backgroundColor="#ffffff" horizontalAlign="center">
              <xgc:WebPageHeader title="Stats Charts" menuDataProvider="{menuOptions}" showColorbar="true"/>
             
              <mx:Form width="100%" styleName="searchForm">
                  <mx:HBox width="100%" styleName="searchFormBackground">
                      <mx:Label text="Select a date to search from:" styleName="searchFormLabel" />
                      <mx:DateField id="searchDate" width="94" height="20" styleName="searchFormDate"/>
                                     
                      <mx:Label text="Duration to cover:" styleName="searchFormLabel" />
                      <mx:NumericStepper id="searchDuration" minimum="1" maximum="366" stepSize="1" maxChars="3" width="50" height="20" styleName="searchFormPeriod"/>
                     
                      <mx:Button click="doDataSearch()" toolTip="search" styleName="searchFormButton"/>
                  </mx:HBox>
              </mx:Form>
             
              <mx:Spacer height="10"/>
         
              <mx:ViewStack id="menuOptions" width="98%" height="100%" styleName="viewstack">
                  <mx:Panel id="DurationCount" width="100%" height="100%" label="Duration Count" toolTip="Duration Count" title="Duration Count" styleName="viewstackPanel">
                      <mx:DataGrid id="grid1" width="100%" height="100%" styleName="viewstackDatagrid"/>
                  </mx:Panel>

       

                  <mx:Canvas width="100%" height="100%" label="Message Count" toolTip="Message Count" styleName="viewstackCanvas">
                      <mx:VBox id="MessageCount" width="100%" height="100%" styleName="viewstackVbox">
                          <mx:HBox width="98%" styleName="viewstackHbox">
                              <mx:Label text="Message Count" width="98%" styleName="viewstackLabel"/>
                              <mx:Spacer width="100%"/>
                              <mx:Button click="changeView()" toolTip="Change View" styleName="viewstackChartButton" />
                          </mx:HBox>


                          <!-- The DataGrid or Chart is Added Here in actionscript code -->

       

                      </mx:VBox>
                  </mx:Canvas>
                             
                  <mx:Panel id="AverageCount" width="100%" height="100%" label="Average Count" toolTip="Average Count" title="Average Count" styleName="viewstackPanel">
                      <mx:DataGrid id="grid3" width="100%" height="100%" styleName="viewstackDatagrid"/>
                  </mx:Panel>
                 
              </mx:ViewStack>

       

              <xgc:WebPageFooter copyright="copyright © 2009"/>
          </mx:VBox>
      </mx:Application>

        • 1. Re: Why doesn't flex app height expand beyond browser height?
          *Prashant Shelke* Level 4

          see following modified code:

           

            <mx:ViewStack id="menuOptions" width="98%" height="100%" styleName="viewstack">
                      <mx:Panel id="DurationCount" width="100%" height="100%" label="Duration Count" toolTip="Duration Count" title="Duration Count" styleName="viewstackPanel">
                          <mx:DataGrid id="grid1" width="100%" height="100%" styleName="viewstackDatagrid"/>
                      </mx:Panel>

           

                      <mx:Canvas width="100%" height="100%" label="Message Count" toolTip="Message Count" styleName="viewstackCanvas">
                          <mx:VBox id="MessageCount" width="100%" height="100%" styleName="viewstackVbox">
                              <mx:HBox width="98%" styleName="viewstackHbox" height="20%">           <--------------------------------------
                                  <mx:Label text="Message Count" width="98%" styleName="viewstackLabel"/>
                                  <mx:Spacer width="100%"/>
                                  <mx:Button click="changeView()" toolTip="Change View" styleName="viewstackChartButton" />
                              </mx:HBox>


                              <!-- The DataGrid or Chart is Added Here in actionscript code --> Specify Height as "80%" <--------------------------------------

           

                          </mx:VBox>
                      </mx:Canvas>
                                 
                      <mx:Panel id="AverageCount" width="100%" height="100%" label="Average Count" toolTip="Average Count" title="Average Count" styleName="viewstackPanel">
                          <mx:DataGrid id="grid3" width="100%" height="100%" styleName="viewstackDatagrid"/>
                      </mx:Panel>
                     
                  </mx:ViewStack>

          • 2. Re: Why doesn't flex app height expand beyond browser height?
            ChristopherBos

            Hi Xander,

             

            I don't have my sample code in front of me so I'll just explain the approach I took to use the browser scrollbars (This approach will not work in some older browsers like FF1.5 it does work in IE 6 though.) It should enable your browser scrollbars to scroll your application rather than the default flex ones.

             

            1) In your html container wrap the swf embed in a div tag, set the height and width values of the swf to 100%

             

            2) Create a javascript function that takes in height/width parameters, the javascript function will update the height and width values on the div tag (swf will resize to fit)

             

            3) Set the horizontal and vertical scrolling policies of the application to no scrolling

             

            4) In you application, in the creationComplete handler use ExternalInterface to register the javascript function in the container. Now call it with the intial height/width of the application

             

            5) Listen for the Resize event at the application level, and send the height/width values to the javascript function

            • 3. Re: Why doesn't flex app height expand beyond browser height?
              xandesign Level 1

              Thanks Prashant Shelke that worked great.

              • 4. Re: Why doesn't flex app height expand beyond browser height?
                *Prashant Shelke* Level 4

                Nice, can marked answer as such?