Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    1
    Vote Rating
    0
    mbalsevich is on a distinguished road

      0  

    Default Multi-column checkboxgroup overlaps when container has Layout:vbox and align:stretch

    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.2.1
    Browser versions tested against:
    • Chrome 27.0.1453.116 (Mac OSX)
    • FF 21.0 (Mac OSX, Firebug 1.11.4)
    DOCTYPE tested against:
    • html
    • HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    Description:
    • multi-column CheckboxGroup with labels at the top overlap with the next field when its container has layout "vbox" with "stretch" alignment
    Steps to reproduce the problem:
    • Create a form with layout:{type:"vbox",align:"stretch"} and fieldDefaults:{labelAlign:"top"}, then add as items one or more checkboxgroups WITH labels and column count greater than 1.
    The result that was expected:
    • The checkbox group should not overlap with other fields above or below it
    The result that occurs instead:
    • The field below the checkbox group overlaps with it
    Test Case:


    Code:
        Ext.create('Ext.form.Panel', {
        title: 'Checkbox Group',
        width: 500, // height it NOT set, I want the container to grow
        bodyPadding: 10,
        layout:{type:"vbox",align:"stretch"},
        fieldDefaults:{labelAlign:"top",labelStyle:"font-weight:bold"},
        renderTo: Ext.getBody(),
        items:[{
            xtype: 'checkboxgroup',
            fieldLabel: 'Group #1',
            columns: 2,
            items: [
                { boxLabel: 'Item 1', name: 'c1', inputValue: '1' },
                { boxLabel: 'Item 2', name: 'c1', inputValue: '2', checked: true },
                { boxLabel: 'Item 3', name: 'c1', inputValue: '3' },
                { boxLabel: 'Item 4', name: 'c1', inputValue: '4' },
            ]
        },{
            xtype: 'checkboxgroup',
            fieldLabel: 'Group #2',
            columns: 2,
            items: [
                { boxLabel: 'Item 1', name: 'c2', inputValue: '1' },
                { boxLabel: 'Item 2', name: 'c2', inputValue: '2', checked: true },
                { boxLabel: 'Item 3', name: 'c2', inputValue: '3' },
                { boxLabel: 'Item 4', name: 'c2', inputValue: '4' },
            ]
        }]
    });





    HELPFUL INFORMATION


    Screenshot or Video:See this URL for live test case: http://www.tocoweb.com/migs/ext/sample1.html


    Debugging already done:
    • Changed CSSs
    • Encapsulated checkboxgroup inside another container
    Possible fix:
    • None known
    Additional CSS used:
    • Only default ext-all.css
    Operating System:
    • Mac OSX
    • Win XP
    • Win8
    • (Does not seem to matter)
    *EDIT BY SLEMMON
    Issue observed with 4.1.0 - 4.2.1 when using labelAlign: 'top'
    Last edited by slemmon; 19 Jun 2013 at 1:05 PM. Reason: additional test notes

  2. #2
    Sencha User
    Join Date
    Apr 2013
    Posts
    2
    Vote Rating
    0
    ff19881109 is on a distinguished road

      0  

    Default

    This solution may help you. It aligns the children fields in a group in a float style.https://github.com/shiyang-fei/FloatSelectionGroup