[CLOSED] Modal Window Problem with lower Resolutions

[webppl]

Am facing problem with screen resolutions if i decrease it to 1024 x 768 resolution. Modal window doesn't fits in area and no autscroll comes.
I read in forums that viewport doest support Autoscroll property. Am sending Screen shots. How to solve this?

[Daniil]

Hi,

I cant's see any screen-shots, it looks like you forgot to attach it.

I guess you use Window with Autoload with Mode="IFrame".

Well, you could place Panel inside Viewport and get scrolling.

[webppl]

Daniil, Screenshots are already sent to support mailbox.

[Daniil]

Thanks for the screen-shots.

Unfortunately, it's not enough to solve the issue.

Did you follow my recommendation in the previous post?

If it doesn't make sense, please provide a sample to reproduce the problem. Please leave code only that really needs to reproduce the problem.

[webppl]

Well its not working. Here's the code

<ext:ViewPort ID="ViewPort1" AutoScroll="true" runat="server" Layout="Fit">
    <Items>
    
           <ext:GridPanel 
                ID="Grid" 
                runat="server"
                Icon="Table"
                AutoScroll="true"
                Frame="true"
                TrackMouseOver="true"        
                StoreID="dsStore"
                Layout="fit"
                AutoExpandColumn="Username">
                <TopBar>
                   <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                             <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
                                <ext:Button StandOut="true" ToolTip="Click to add new user" ID="Button2" runat="server" Text="Add User" Icon="UserAdd">
                                  <Listeners>
                                    <Click Handler="#{UserWindow}.show();" />
                                  </Listeners>
                                
                                </ext:Button>
                                 <ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server" />
                              
                                </Items>
                        </ext:Toolbar> 

                </TopBar>

                <ColumnModel>
                    <Columns>
                    <ext:RowNumbererColumn />
                   
                        <ext:Column ColumnID="Username" Header="Username"  DataIndex="username" />
                        <ext:Column ColumnID="Password" Header="Password"  DataIndex="password" />
                       <ext:Column ColumnID="Name" Header="Name" Align="Center" DataIndex="name" />
                        <ext:Column ColumnID="Surname" Header="Surname" Align="Center" DataIndex="surname" />
                        <ext:CommandColumn Width="25" Hideable="false">
                                    <Commands>
                                        <ext:GridCommand CommandName="edit" Icon="ApplicationFormEdit">
                                            <ToolTip Text="Edit" />
                                        </ext:GridCommand>
                                    </Commands>
                                    <PrepareToolbar Handler="toolbar.setVisible(!record.newRecord);" />
                               
                        </ext:CommandColumn>
                         <ext:CommandColumn Width="25" Hideable="false">
                                    <Commands>
                                        <ext:GridCommand CommandName="change" Icon="UserEdit">
                                            <ToolTip Text="Reset password" />
                                        </ext:GridCommand>
                                
                                    </Commands> 
                                     <PrepareToolbar Handler="toolbar.setVisible(!record.newRecord);" />     
                        </ext:CommandColumn>
                       <ext:CommandColumn Width="25" Hideable="false">
                                    <Commands>
                                        <ext:GridCommand CommandName="delete" Icon="BinClosed">
                                            <ToolTip Text="Delete's User" />
                                        </ext:GridCommand>
                                    </Commands>
                                </ext:CommandColumn>
                     </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                </SelectionModel>
                <Listeners>
                            <Command Fn="commandHandler" />
                          
                 </Listeners>
                 <LoadMask ShowMask="true" />
                 <SaveMask ShowMask="true" />
           </ext:GridPanel>
    </Items>
</ext:ViewPort>
  
<ext:Window 
        ID="UserWindow" 
        runat="server" 
        Icon="UserAdd" 
        Width="835"
        Title="New User"
        AutoScroll="true"
        Height="540"
        Modal="true" 
        InitHidden="true" 
        Constrain="true">
        <AutoLoad 
            Url="/Account/AddUser/" 
            Mode="IFrame" 
            TriggerEvent="show" 
            ReloadOnEvent="true" 
            ShowMask="true" 
            MaskMsg="Loading Add User...">
            <Params>
                <ext:Parameter Name="id" Value="" Mode="Value" />
            </Params>
        </AutoLoad>
        <Buttons>
            <ext:Button runat="server" ID="Button3" Text="Close">
                <Listeners>
                    <Click Handler="#{UserWindow}.hide();" />
                </Listeners>
            </ext:Button>
        </Buttons>
      
    </ext:Window>

[Daniil]

Thank you.

What thing do you return from Url="/Account/AddUser/"? Could you provide?

Generally speaking you have to make scrolling inside frame - in /Account/AddUser/. Then if there is no place for Window (only part of Window is displayed on the screen, it needs to decrease Widow's size - width or/and height).

[webppl]

Well this Action /Account/AddUser/ loads AddUser View inside window.

[Daniil]

I understand:) But what exactly view?

Could you provide a simplified version to reproduce the issue?

[Vladimir]

Hi,

Page with ViewPort doesn't provide scrolling therefore you have to decrease window size if the browser window size is less then Ext.Net window. For example, you can check it in the Show handler

var size = Ext.getBody().getViewSize();
if (this.getHeight() > size.height) {
     this.setHeight(size.height - 20);
}
else{
       this.setHeight(800); // default height
}

if (this.getWidth() > size.width) {
     this.setWidth(size.width - 20);
}
else{
       this.setWidth(800); // default width
}