[FIXED] [#793] [3.2.0] Setting sizes of models with % percentages instead of pixel-count

  1. #1

    [FIXED] [#793] [3.2.0] Setting sizes of models with % percentages instead of pixel-count

    Hello everybody,
    Me and my co-workers are losing our minds over this...
    We want to be able to set a Window or panel or whatever with height and width that will always be proportionate.
    On every computer that we open the site on, if the resolution is different, there are major impacts on the appearance.

    We want to be able to write something like width="20%" for some panel (in a window)
    and for a "popup" window width="85%" height="85%" (of the browser size) so there will be small margins and the window will be completely viewable from every resolution...

    Thank you so much!
    Tamar
    Last edited by Daniil; Apr 25, 2015 at 11:31 AM. Reason: [FIXED] [#793] [3.2.0]
  2. #2
    Hi @fire17,

    Welcome to the Ext.NET forums!

    Not sure how it happened, but there is no a specific server side property to set width and height in percents. But there is such a possibility in ExtJS.

    Created an Issue - Missed server side properties to set a component's Width and Height in a CSS value (e.g. in percents).

    Currently, it is possible via CustomConfig only.

    Fixed in the revision 6424 (trunk). It goes to 3.2.0.

    Added the WidthSpec and HeightSpec server side properties. It allows to set a string which is treated as a CSS value - WidthSpec="85%", HeightSpec="85%".

    Also while working on the example, I encountered this ExtJS bug.
    Created an Issue to track the defect - Window doesn't update its layout on a browser resize if width/height are set in percents.
    A possible workaround you can see in the examples below.

    So, here are two examples. The first one you can use right away. For the second one you should update from SVN trunk or use it with the Ext.NET 3.2.0 release.

    Example 1 (no update from SVN trunk is required)
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server">
                <Listeners>
                    <%-- A workaround for the issue - https://github.com/extnet/Ext.NET/issues/794 --%>
                    <WindowResize Handler="App.Window1.updateLayout(); 
                                           App.Window1.updateLayout();" />
                </Listeners>
            </ext:ResourceManager>
            
            <ext:Window ID="Window1" runat="server" Layout="CenterLayout">
                <CustomConfig>
                    <ext:ConfigItem Name="width" Value="85%" Mode="Value" />
                    <ext:ConfigItem Name="height" Value="85%" Mode="Value" />
                </CustomConfig>
                <Items>
                    <ext:Panel runat="server" Title="Header" Html="Content">
                        <CustomConfig>
                            <ext:ConfigItem Name="width" Value="20%" Mode="Value" />
                        </CustomConfig>
                    </ext:Panel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    Example 2 (update from SVN trunk is required)
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server">
                <Listeners>
                    <%-- A workaround for the issue - https://github.com/extnet/Ext.NET/issues/794 
                         It might be not required with 3.2.0. Please see the Issue comments.    
                    --%>
                    <WindowResize Handler="App.Window1.updateLayout(); 
                                           App.Window1.updateLayout();" />
                </Listeners>
            </ext:ResourceManager>
            
            <ext:Window 
                ID="Window1" 
                runat="server" 
                Layout="CenterLayout"
                WidthSpec="85%"
                HeightSpec="85%">
                <Items>
                    <ext:Panel 
                        runat="server" 
                        Title="Header" 
                        Html="Content"
                        WidthSpec="20%" />
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] UI Control sizes are big in 3x version
    By speedstepmem4 in forum 3.x Premium Help
    Replies: 2
    Last Post: Feb 05, 2015, 5:42 AM
  2. [CLOSED] MVC Models with ext.net
    By mrazi in forum 2.x Premium Help
    Replies: 1
    Last Post: Nov 15, 2012, 7:09 PM
  3. CSS to format button sizes and text
    By mtrutledge in forum 1.x Help
    Replies: 0
    Last Post: Apr 25, 2012, 7:28 PM
  4. Replies: 1
    Last Post: Sep 22, 2011, 12:38 PM
  5. Replies: 4
    Last Post: Aug 30, 2011, 11:35 PM

Tags for this Thread

Posting Permissions