Question

I’m stumped on what I assume must be a trivial problem. I’ve got a panel, which contains a datagrid (expected to fill up the majority of the realestate fluidly), and a handful of buttons and text fields pinned to the bottom edge of the panel. Its a classic datagrid+search combo. What I’m stuck on, is that while the datagrid will grow into large ‘viewport’ just fine, after I shrink down to about 600 pixels or so, the height of the datagrid stops shrinking, pushing the bottom-pinned content off-screen. I’ve played with various settings of minHeight, and while larger settings work (also, curiously, overlaying the bottom-pinned stuff where it belongs, instead of off-screen). the smaller settings are apparently ignored or overwritten for some reason.

It seems as if there must be another setting of some sort that I need to make, but I’ve been messing with this now for hours, and I’m just hoping one of you knows exactly what the issue is. My problem now is that I don’t know what else to try!

Here’s a few screenshots, first the design preview, second, the browser rendering. You can see how the bottom row of buttons gets cut off, and, if I shrink the window even more, I’ll cut off parts of the datagrid as well.

Thanks!

EDIT: here’s code to my test app, where all the behavior is what it should be…and the hierarchy exactly mimics whats going on in my test app (copy/pasted directly from) .

<?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" width="100%" height="100%">


<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]private var _data:ArrayCollection;
    ]]>
</fx:Script>

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




<s:Group  width="100%" height="100%">   

    <s:BorderContainer  width="100%" height="100%"
                        backgroundColor="silver"
                        cornerRadius="8"
                        borderStyle="inset" borderWeight="1"
                        >

        <!--Main application viewstack-->
        <mx:ViewStack  width="100%" height="100%" >



            <s:NavigatorContent width="100%" height="100%">

                <!--sub-application viewstack-->
                <s:Group width="100%" height="100%">

                    <mx:ViewStack id="vs" width="100%" height="100%" x="0" y="0"  >


                        <s:NavigatorContent width="100%" height="100%">
                            <s:Group width="100%" height="100%">



                                <s:Panel 
                                    minHeight="170"
                                    title="Order Entry—Customer    [Search for existing contacts...]" height="100%" width="100%">

                                    <s:Scroller width="100%" height="100%">
                                        <s:Group clipAndEnableScrolling="true">

                                            <mx:DataGrid 
                                                id="dgSelect" 
                                                dataProvider="{_data}" 
                                                sortableColumns="false" resizableColumns="true"  draggableColumns="false"
                                                doubleClickEnabled="true" 
                                                allowMultipleSelection="false" 
                                                minHeight="68"
                                                top="4" bottom="70" left="4" right="4">
                                                <mx:columns>
                                                    <mx:DataGridColumn headerText="Last Name" dataField="LName" width="100" />
                                                    <mx:DataGridColumn headerText="First Name" dataField="FName"  width="100" />
                                                    <mx:DataGridColumn headerText="Address" dataField="Address1"  width="250" />
                                                    <mx:DataGridColumn headerText="City" dataField="City"  width="100" />
                                                    <mx:DataGridColumn headerText="State" dataField="State" width="50" />
                                                    <mx:DataGridColumn headerText="Zip" dataField="Zip"  width="50" />
                                                    <mx:DataGridColumn headerText="Email" dataField="EMail" />
                                                </mx:columns>
                                            </mx:DataGrid>

                                            <s:Group bottom="40" left="4" width="100%" height="21">
                                                <s:Label text="Last"  width="41" height="22" verticalAlign="middle"/>
                                                <s:TextInput id="txtSearchLast" maxChars="9"  width="100" left="41"/>

                                                <s:Label text="First"  width="36" verticalAlign="middle" left="185" height="21"/>
                                                <s:TextInput id="txtSearchFirst" maxChars="9" width="100" left="220"/>

                                                <s:Label id="lblSearchError" color="#FF0000" fontSize="10" left="336" right="158"/>
                                                <mx:Spacer width="100%"/>
                                                <s:Button id="btnSearchSelect" label="Select"  right="80"/>
                                                <s:Button id="btnSearchEdit"   label="Edit"    right="4"/>

                                            </s:Group>




                                            <s:Group bottom="10" height="21">
                                                <s:layout >
                                                    <s:HorizontalLayout paddingLeft="10" paddingRight="10"/>
                                                </s:layout>

                                                <mx:Button id="btnCancel"  label="Cancel" />    
                                                <mx:Spacer/>
                                                <mx:Button id="btnStartOver"  label="Start Over" />
                                                <mx:Spacer/>
                                                <mx:Button id="btnExpressContact"  label="Express Contact"/>
                                                <mx:Button id="btnExpressCart" label="Ω" />
                                                <mx:Spacer/>
                                                <mx:Button  id="btnCustomerNew"   label="New Customer"      />  
                                                <mx:Spacer/>                    
                                                <mx:Button id="btnNext"   label="Next"     />

                                            </s:Group>

                                        </s:Group>
                                    </s:Scroller>


                                </s:Panel>
                            </s:Group>
                        </s:NavigatorContent> 

                    </mx:ViewStack> 
                </s:Group>
            </s:NavigatorContent> 

        </mx:ViewStack>





    </s:BorderContainer>
</s:Group>

</s:Application>

Answer 1

i think, a little peace of code will help.
How do you implement your viewport? Where you are setting your scroller. What is the layoutproperty and so one.

As i understand, you are writing a application with flex4 and spark components, right?

You have to define a scroller (viewport) in your application for scrollbars. Spark components do not have automatic scrollbars like the halo components.

One of the multiple possibilities are to define a skin for the application. In this skin, code an scroller around the content group. After this, set the hight and width properties to 100%.

maybe this will help without code

see you
Frank