[CLOSED] Unable to get panel to fit to view port and scroll

[Labyrinth]

I have a master page that contains a viewport with a tab panel.

The first tab panel contains an asp.net content control, "SettingsContent", which may be loaded with a number of asp.net controls.

My problem is that this tab does not scroll when there are a lot of controls.

        <ext:Viewport ID="Viewport1" runat="server">
            <Items>
                <ext:TabPanel ID="SettingsTabs" runat="server" Border="false" >
                    <TopBar>
                        <ext:Toolbar ID="SettingsToolbar" runat="server">
                            <Items>
                                    <DirectEvents><Check OnEvent="UseTemplateSettings_Check" /></DirectEvents>
                                </ext:Checkbox>
                                <ext:Button ID="SaveSettings" runat="server" Text="Save">
                                    <DirectEvents><Click OnEvent="Save_Click" Success="WindowManager.closeDialog(result.extraParamsResponse.data.evalJSON());" /></DirectEvents>
                                </ext:Button>
                                <ext:Button ID="CancelSettings" runat="server" Text="Cancel">
                                    <Listeners><Click Handler="WindowManager.closeDialog();"  /></Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Items>
                        <ext:Panel Title="Settings" runat="server" ID="SettingsPanel" Border="false" AnchorVertical="100%">
                            <Content><asp:ContentPlaceHolder ID="SettingsContent" runat="server" /></Content>
                        </ext:Panel>
                        <ext:FormPanel Title="Publishing" runat="server" LabelWidth="130" Border="false">
                            <Items>
                                
... Some EXT form fields


                                <ext:CompositeField  ID="GroupsField" runat="server" LabelSeparator="" FieldLabel="Groups">
                                    <Items>
                                        <ext:Panel runat="server" Border="false">
                                            <Content>
                                                
... An ASP.NET server control.

                                            </Content>
                                        </ext:Panel>
                                    </Items>                                                                        
                                </ext:CompositeField>
                            </Items>
                        </ext:FormPanel>
                    </Items>
                </ext:TabPanel>
            </Items>

[geoffrey.mcgill]

Hi Labyrinth,

Can you set AutoScroll="true" on your "SettingsPanel"?

[Labyrinth]

AutoScroll didn't work so I removed it.

I hae tried all sorts of combinations of nesting panels within others and different layouts and can't seam to come up with a combination that works.

[Labyrinth]

Further investigation shows that the tab panel is not constrained to the size of the viewport. When I add AutoScroll to the viewport I get scrollbars (just not where I want them)

So now the question is - how do I get the tab panel to fit to the ViewPort?

[geoffrey.mcgill]

how do I get the tab panel to fit to the ViewPort?

Set Layout="fit" on the Viewport.

[Labyrinth]

I have wrapped the tab panel in a FitLayout and now I have the scroll bars where I want them.

My structure is now:

Viewport
----FitLayout
--------TabPanel

[geoffrey.mcgill]

Hi,

It would be better to set Layout="fit" on the Viewport and remove the <ext:FitLayout> control.


Either way it will work.