1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    11
    Vote Rating
    0
    Answers
    1
    cac is on a distinguished road

      0  

    Default Answered: Alignment issues in IE for panel with hbox layout

    Answered: Alignment issues in IE for panel with hbox layout


    Hi,

    I am facing issues with panel having hbox layout and the items inside it have vbox layout. labels and checkboxes are not aligned horizontally in IE but in FF and chrome it works fine.

    When I inspect the html code in debuggers, I see that lables gets added to the DIV and checkboxes gets added to TABLE in all the browsers. However, it seems it seems pixel calculation is different for IE while adding components to TABLE. "Add" column checkbox does not align with the label. IE keeps adding 2-3 pixels each time as the number of checkboxes increases vertically.

    Can somebody please help me? Is css correct? Please find below code.

    This is how I create the panel.
    Code:
    var table = new Ext.Panel({            
               margin: '0 0 10 0',
                xtype: "panel",
                layout :{
                      type: 'hbox',
                      align: 'stretch',
                      pack: 'center'            
                },
                    items :[{
                        title: 'ABC',
                        titleAlign: 'center',
                        flex: 3,
                        region: 'west',
                        layout:{
                            type:'vbox',
                            align: 'stretch',
                            pack: 'center'
                        }
                    },{
                        title: 'Add',
                        titleAlign: 'center',
                        region: 'center',
                        itemId: "1",
                        flex: 1,
                        layout:{
                            type:'vbox',
                            align: 'stretch',
                            pack: 'start'
                        }
                        
                    }] })
    I add the components inside the vbox (items of panel) as shown below
    Code:
    var label = Ext.create('Ext.form.Label',{
                             cls: 'labelAlignment', 
                             text: wellHeader['dataTypeLabel']
                            
                        });            
                        table.items.items[0].add(label);
    
    var checkbox = Ext.create('Ext.form.field.Checkbox',{
                                          inputValue: "Test",
                                          itemId: "checkbox1",
                                          cls: 'checkboxAlignment', 
                                          disabled: false
                                      });
                                   table.items.items[1].add(checkbox);
    Below are the css classes
    Code:
    .checkboxAlignment {
    margin-bottom: 6px;
    margin-left: 20px;
    margin-top: 6px;
    line-height: 16px;
    }
    
    
    .labelAlignment {
    line-height: 16px;
    margin-top: 6px;
    margin-left: 10px;
    margin-bottom: 6px;
    overflow: hidden;
    padding: 0;
    
    
    }

  2. So apparently I came to the conclusion that it was a IE bug and it does not calculate the top margins properly for "tables". To solve the issue I created two css classes one for specially labels and other one for all checkboxes. I wrote the conditional css. based on the browser. I am assigning the line-height to the labels.
    As the checkboxes goes below for IE , I provide line-height=16px for browsers other than IE and provide line-height=17px for IE.

    Thus checkboxes still goes down below but I made its labels to go down too by providing line-height property.
    Code:
    .labelAlignment {line-height: 16px;
    line-height: 17px\9; // This is css hack to check if its IE9 and below.
    margin-top: 6px;
    margin-left: 10px;
    margin-bottom: 6px;

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    If you don't add your own CSS classes do you see the same behavior from the framework itself?
    If so, what version of IE are you using?

    Also, it look like you're creating a label component and then a checkbox component.
    Have you tried using boxLabel and boxLabelAlign as configs of the checkbox?

  4. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    11
    Vote Rating
    0
    Answers
    1
    cac is on a distinguished road

      0  

    Default


    Hi Thanks for you reply.

    Yes I am seeing the same behavior when I do not add css. I am using IE 9. When I remove the css I just add margin property in the code and the alignment issue is still there.
    Actually, I have 2 other columns along with the "Add" column. So in all there are 4 columns - one for label and 3 for checkboxes. That is why I did not try boxLabel.

    It seems in any browser label gets added to the DIV and checkboxes get added to html table. Alignment issue in MOZILLA gets solved when .labelAlignment class is given line-height of 16px.

    When I inspect pixel position in browser, it shows that pixel values for all the labels (I have 7 labels one below the other) is same across all the browser, however, in IE 9 pixel value for all 7 checkboxes in all the three columns is more ( which causes it to shift downwards)

  5. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    I'm not seeing the issue described when I try and recreate the issue. Perhaps I haven't captured the issue well in a test case? If not feel free to create your own test case and I'll test with it instead.

    Code:
    var table = new Ext.Panel({
        renderTo: Ext.getBody(),
        margin: '0 0 10 0',
        width: 250,
        xtype: "panel",
        layout: {
            type: 'hbox',
            align: 'stretch',
            pack: 'center'
        },
        items: [{
                title: 'ABC',
                titleAlign: 'center',
                flex: 3,
                region: 'west',
                layout: {
                    type: 'vbox',
                    align: 'stretch',
                    pack: 'center'
                }
                , items: [{
                    xtype: 'label'
                    , text: 'Test'
                }, {
                    xtype: 'checkboxfield'
                    , inputValue: "Test"
                }, {
                    xtype: 'label'
                    , text: 'Test'
                }, {
                    xtype: 'checkboxfield'
                    , inputValue: "Test"
                }, {
                    xtype: 'label'
                    , text: 'Test'
                }, {
                    xtype: 'checkboxfield'
                    , inputValue: "Test"
                }]
            }, {
                title: 'Add',
                titleAlign: 'center',
                region: 'center',
                itemId: "1",
                flex: 1,
                layout: {
                    type: 'vbox',
                    align: 'stretch',
                    pack: 'start'
                }
                , items: [{
                    xtype: 'label'
                    , text: 'Test'
                }, {
                    xtype: 'checkboxfield'
                    , inputValue: "Test"
                }, {
                    xtype: 'label'
                    , text: 'Test'
                }, {
                    xtype: 'checkboxfield'
                    , inputValue: "Test"
                }, {
                    xtype: 'label'
                    , text: 'Test'
                }, {
                    xtype: 'checkboxfield'
                    , inputValue: "Test"
                }]
            }
        ]
    });

  6. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    11
    Vote Rating
    0
    Answers
    1
    cac is on a distinguished road

      0  

    Default


    Hi , Thank you for your reply.

    I am not sure what you mean by the test case. Code posted in my first post is exactly what I am trying to achieve. To be more clear, I have 4 columns - first column is all labels and other three columns all checkboxes. I want labels to be aligned horizontally with checkboxes.
    I have modified your test case. Can you please run it and test? however, I am adding items(column items) dynamically as shown in my first post code.


    Code:
    var table = new Ext.Panel({    renderTo: Ext.getBody(),
        margin: '0 0 10 0',
        width: 250,
        xtype: "panel",
        layout: {
            type: 'hbox',
            align: 'stretch',
            pack: 'center'
        },
        items: [{
                title: 'ABC',
                titleAlign: 'center',
                flex: 3,
                region: 'west',
                layout: {
                    type: 'vbox',
                    align: 'stretch',
                    pack: 'center'
                }
                , items: [{
                    xtype: 'label'
                    , text: 'Test'
                },{
                    xtype: 'label'
                    , text: 'Test'
                },{
                    xtype: 'label'
                    , text: 'Test'
                },{
                    xtype: 'label'
                    , text: 'Test'
                },{
                    xtype: 'label'
                    , text: 'Test'
                },{
                    xtype: 'label'
                    , text: 'Test'
                }]
            }, {
                title: 'Add',
                titleAlign: 'center',
                region: 'center',
                itemId: "1",
                flex: 1,
                layout: {
                    type: 'vbox',
                    align: 'stretch',
                    pack: 'start'
                }
                , items: [{
                    xtype: 'checkbox'
                    , inputValue: "Test1"
                }, {
                    xtype: 'checkbox'
                    , inputValue: "Test2"
                }, {
                    xtype: 'checkbox'
                    , inputValue: "Test3"
                }, {
                    xtype: 'checkbox'
                    , inputValue: "Test4"
                }, {
                    xtype: 'checkbox'
                    , inputValue: "Test5"
                },  {
                    xtype: 'checkbox'
                    , inputValue: "Test6"
                }]
            },{
                title: 'AddTest',
                titleAlign: 'center',
                region: 'center',
                itemId: "2",
                flex: 1,
                layout: {
                    type: 'vbox',
                    align: 'stretch',
                    pack: 'start'
                }
                , items: [{
                    xtype: 'checkbox'
                    , inputValue: "Test11"
                }, {
                    xtype: 'checkbox'
                    , inputValue: "Test21"
                }, {
                    xtype: 'checkbox'
                    , inputValue: "Test31"
                }, {
                    xtype: 'checkbox'
                    , inputValue: "Test41"
                }, {
                    xtype: 'checkbox'
                    , inputValue: "Test51"
                },  {
                    xtype: 'checkbox'
                    , inputValue: "Test61"
                }]
            }
        ]
    });
    Also, can you please tell me how do you test the test cases so that I can also try on my own.

    Thanks.

  7. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Using the last code snippet you provided I'm not seeing any layout issues in Chrome or IE9 using my local copies of 4.1.1, 4.1.3, or 4.2. Sorry I was unable to reproduce the issue.

  8. #7
    Sencha User
    Join Date
    Apr 2013
    Posts
    11
    Vote Rating
    0
    Answers
    1
    cac is on a distinguished road

      0  

    Default


    Hi,

    Thank you for your reply.

    That was to just give an idea, what I am trying to achieve. It does not have margins set. I am not sure why you were creating a test case.
    My actual code was already mentioned in my first code. Can you please take code from my first post and run it own your machine?

    I am attaching a screenshot of the problem mentioned. Green mark is the extra space. Labels does not have a problem as label on all browsers show same pixel values. As stated earlier checkboxes gets shifted below in IE, as I add more items in the column.

    I am using Extjs 4.1.3 version. I appreciate your help in this matter.

    Thanks.
    Attached Images

  9. #8
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    I've not been able to reproduce your issue by taking your code snippets and making a complete test case myself. Can you make a complete test case (not just code snippets) to show what you're doing in your code that I (or the community) can test without having to assemble our own inline test case?

    Also, have you tested to see if the issue you see in 4.1.3 persists in 4.2? If it's fixed in 4.2 then I'd advise to upgrade the framework as 4.2 does have a number of bug fixes reported from previous framework versions.

  10. #9
    Sencha User
    Join Date
    Apr 2013
    Posts
    11
    Vote Rating
    0
    Answers
    1
    cac is on a distinguished road

      0  

    Default


    Thanks for your reply.

    Can you please let me know what do you mean by test case? or can you post the test case created by you so that I can modify it? Also, can you please let me know how do you test it so that I can test it by myself.

    So you mean the way code is written should not create the problem? Code is written correctly? and there might be a bug in Extjs 4.1.3

    Thanks.

  11. #10
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    What I'm looking for is a self-contained block of code that I can place in an onReady function (or in an Ext.application launch method) and see if I see what you're seeing.

    When I run the following code I don't notice any issues (the way I test is I have a copy of 4.1.1, 4.1.3, 4.2, and 4.2.1 Beta on my local machine with a local webserver and I drop the test code into a sample index.html page, point to a specific ExtJS framework version, and run the code to see if I can reproduce the issue).

    Code:
    var table = new Ext.Panel({    renderTo: Ext.getBody(),    margin: '0 0 10 0',    width: 250,    xtype: "panel",    layout: {        type: 'hbox',        align: 'stretch',        pack: 'center'    },    items: [{            title: 'ABC',            titleAlign: 'center',            flex: 3,            region: 'west',            layout: {                type: 'vbox',                align: 'stretch',                pack: 'center'            }            , items: [{                xtype: 'label'                , text: 'Test'            }, {                xtype: 'checkboxfield'                , inputValue: "Test"            }, {                xtype: 'label'                , text: 'Test'            }, {                xtype: 'checkboxfield'                , inputValue: "Test"            }, {                xtype: 'label'                , text: 'Test'            }, {                xtype: 'checkboxfield'                , inputValue: "Test"            }]        }, {            title: 'Add',            titleAlign: 'center',            region: 'center',            itemId: "1",            flex: 1,            layout: {                type: 'vbox',                align: 'stretch',                pack: 'start'            }            , items: [{                xtype: 'label'                , text: 'Test'            }, {                xtype: 'checkboxfield'                , inputValue: "Test"            }, {                xtype: 'label'                , text: 'Test'            }, {                xtype: 'checkboxfield'                , inputValue: "Test"            }, {                xtype: 'label'                , text: 'Test'            }, {                xtype: 'checkboxfield'                , inputValue: "Test"            }]        }    ]});

Thread Participants: 1

Tags for this Thread