Window falls outside screen with FitLayout
We have a customer that uses a laptop with a resolution height of 768. The application runs in a iframe with above it a header and above that the browser frame. So there is not much height left for the application. We use tabs and FitLayout to be able to fill the screen on certain tabs. Only now have an issue with windows that are cut off on top and bottom because they are rendered in the body.
Inside the tabs we can force a certain height with a scrollbar. So if we could render the window there it would solve the issue. But I wasn't able to get this done with renderto. Or maybe there's a better solution?
Ext.Net.Mvc: 3.3.0
.NET Framework: 4.7.2
Made small example. To reproduce:
- Make screen smaller so the window doesn't fit
- Go to page and open "Test" tab
- Click "Open Window"
This will show the window centered in the body, and top and bottom are not visible with no scrollbar.
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:TabPanel runat="server">
<Items>
<ext:Panel runat="server" Layout="FitLayout" Title="Fill Tab">
<Items>
<ext:GridPanel runat="server" BodyStyle="background-color:#333;">
</ext:GridPanel>
</Items>
</ext:Panel>
<ext:Panel runat="server" ID="pnlOpenWindow" Title="Test" AutoScroll="True">
<Items>
<ext:Button runat="server" Text="Open Window">
<Listeners>
<Click Handler="#{wndTest}.show();"></Click>
</Listeners>
</ext:Button>
<ext:Panel runat="server" Height="200">
<Content>
Test
</Content>
</ext:Panel>
<ext:Panel runat="server" Height="200">
<Content>
Test
</Content>
</ext:Panel>
<ext:Panel runat="server" Height="200">
<Content>
Test
</Content>
</ext:Panel>
<ext:Panel runat="server" Height="200">
<Content>
Test
</Content>
</ext:Panel>
<ext:Window runat="server" ID="wndTest" Height="600" Title="Test Window" Modal="True" Hidden="True">
<Content>
Test Window
</Content>
</ext:Window>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</body>
</html>
