What's New?

[CLOSED] RadioGroup with Absolute Layout, Items shift down on Chrome and IE

  1. #1
    Jan 11, 2015, 5:56 PM

    [CLOSED] RadioGroup with Absolute Layout, Items shift down on Chrome and IE

    Hi,



    Sample Code:

    <%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="Ext.Net.Utilities" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>CheckboxGroup and RadioGroup Configuration Options - Ext.NET Examples</title>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager runat="server" />
        
        <ext:FormPanel 
            ID="Panel1"
            runat="server" 
            Title="Check/Radio Groups Example" 
            Frame="true"
            Width="600"
            BodyPadding="10"
            layout="Absolute">            
            <Items>
                <ext:RadioGroup 
                            ID="RadioGroup1" 
                            runat="server"
                            Width="600" 
                            Height="600"
                            X="0" 
                            Y="0"            
                            layout="Absolute" 
                            >
                            <Items>
                                <ext:Radio ID="Radio4" runat="server" BoxLabel="Item 1" X="5" Y="16"/>
                                <ext:Radio ID="Radio5" runat="server" BoxLabel="Item 2" Checked="true" X="5" Y="46"/>
                                <ext:Radio ID="Radio6" runat="server" BoxLabel="Item 3" X="5" Y="76"/>
                                <ext:Radio ID="Radio7" runat="server" BoxLabel="Item 4" X="5" Y="106"/>
                                <ext:Radio ID="Radio8" runat="server" BoxLabel="Item 5" X="5" Y="136"/>
                            </Items>
                        </ext:RadioGroup> 
            </Items>
        </ext:FormPanel>
    </form>
</body>
</html>
    Attached Thumbnails Click image for larger version.  Name: Ext_RG_Issue.jpg  Views: 13  Size: 38.2 KB  ID: 18651  
    Last edited by Daniil; Jan 21, 2015 at 1:00 PM. Reason: [CLOSED]
  2. #2
    Jan 12, 2015, 3:01 AM
    Can you explain why you need to use absolute layout? It would help us to find the best approach that suits your needs.

    It's possible to achieve what you want by not setting RadionGroup's height and setting RadionGroup's ColumnNumbers to 1, as shown bellow:

    <!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>CheckboxGroup and RadioGroup Configuration Options - Ext.NET Examples</title>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Panel Title="Check/Radio Groups Example" Frame="true" Width="600" Height="600" BodyPadding="10" runat="server">
            <Items>
                <ext:RadioGroup ColumnsNumber="1" runat="server">
                    <Items>
                        <ext:Radio BoxLabel="Item 1" runat="server" />
                        <ext:Radio BoxLabel="Item 2" Checked="true" runat="server" />
                        <ext:Radio BoxLabel="Item 3" runat="server" />
                        <ext:Radio BoxLabel="Item 4" runat="server" />
                        <ext:Radio BoxLabel="Item 5" runat="server" />
                    </Items>
                </ext:RadioGroup>
            </Items>
        </ext:Panel>
    </form>
</body>
</html>
    Last edited by RaphaelSaldanha; Jan 12, 2015 at 7:42 AM.
  3. #3
    Jan 12, 2015, 3:03 AM
    For more information about radio groups, please take a look on https://examples3.ext.net/#/Form/Groups/Basic/
  4. #4
    Jan 12, 2015, 3:39 AM
    On your example, it's possible to overcome the issue by adding the following style to your page

    <style type="text/css">
    .x-form-checkboxgroup-body {
        vertical-align: top;
    }
</style>
    <!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>CheckboxGroup and RadioGroup Configuration Options - Ext.NET Examples</title>
    <style type="text/css">
        .x-form-checkboxgroup-body {
            vertical-align: top;
        }
    </style>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager runat="server" />
         
        <ext:FormPanel
            ID="Panel1"
            runat="server"
            Title="Check/Radio Groups Example"
            Frame="true"
            Width="600"
            BodyPadding="10"
            layout="Absolute">            
            <Items>
                <ext:RadioGroup
                            ID="RadioGroup1"
                            runat="server"
                            Width="600"
                            Height="600"
                            X="0"
                            Y="0"           
                            layout="Absolute"
                            >
                            <Items>
                                <ext:Radio ID="Radio4" runat="server" BoxLabel="Item 1" X="5" Y="16"/>
                                <ext:Radio ID="Radio5" runat="server" BoxLabel="Item 2" Checked="true" X="5" Y="46"/>
                                <ext:Radio ID="Radio6" runat="server" BoxLabel="Item 3" X="5" Y="76"/>
                                <ext:Radio ID="Radio7" runat="server" BoxLabel="Item 4" X="5" Y="106"/>
                                <ext:Radio ID="Radio8" runat="server" BoxLabel="Item 5" X="5" Y="136"/>
                            </Items>
                        </ext:RadioGroup> 
            </Items>
        </ext:FormPanel>
    </form>
</body>
</html>
  5. #5
    Jan 12, 2015, 6:40 PM

    Thank you Raphael Saldanha

    The style solve the issue,
  6. #6
    Jan 12, 2015, 7:08 PM
    Can you explain why you need to use absolute layout?

Similar Threads

  1. RadioGroup display different in IE9 and Chrome
    By easypower in forum 1.x Help
    Replies: 6
    Last Post: Mar 26, 2012, 1:30 PM
  2. [CLOSED] Problem with Absolute Layout in IE
    By macap in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 09, 2010, 7:51 AM
  3. layout: 'absolute' in window...
    By César Castro in forum 1.x Help
    Replies: 2
    Last Post: Apr 06, 2010, 3:50 PM
  4. [CLOSED] Absolute layout
    By Jean-Pierre Poulin in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 01, 2010, 4:26 PM
  5. [CLOSED] Absolute Layout Form example does not work
    By harafeh in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 04, 2009, 2:45 PM

Posting Permissions