1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    0
    sadaq is on a distinguished road

      0  

    Default combobox not aligned properly in Opera 11.62?

    combobox not aligned properly in Opera 11.62?


    Hi All,
    i'm using extjs 3.2 version...

    combobox is not properly aligned in Opera browser version 11.62

    plz see the attachment for it...

    it is working fine in IE.

    plz any body can help on this ....

    Thanks in Adv.
    Attached Images

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Are you able to try 3.4 to see if this helps?

    Regards,
    Scott.

  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default


    Ext3.4 has same problem.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    I will need to install Opera to test .. what OS are you using?

    Scott.

  5. #5
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default


    Both Window 7 and Window XP have the problem only with Opera 11.xx, Opera 10.xx are fine.

    Same kind of problem also exists in IEs, but users can avoid the problem to use compatibility view with IEs.

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    I was unable to replicate this on Opera 11.64 (latest) using 3.4 on XP
    Can you replicate this on our online demos?

    f196437.png

    Regards,
    Scott.

  7. #7
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default


    Not all combobox have this problem with Opera 11.xx.

    Here is an example with the problem.

    PHP Code:

    <html>
    <
    head>
        <
    title>Accordion Layout</title>
        <
    link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

        <!-- 
    GC -->
        <!-- 
    LIBS -->
        <
    script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <!-- ENDLIBS -->

        <script type="text/javascript" src="../../ext-all.js"></script>

        <style type="text/css">
            html, body {
                font: normal 12px verdana;
                margin: 0;
                padding: 0;
                border: 0 none;
                overflow: hidden;
                height: 100%;
            }
            .empty .x-panel-body {
                padding-top:20px;
                text-align:center;
                font-style:italic;
                color: gray;
                font-size:11px;
            }
        </style>
        <script type="text/javascript">
            Ext.onReady(function() {

                var item1 = new Ext.Panel({
                    title: 'Accordion Item 1',
                    html: '&lt;empty panel&gt;',
                    cls:'empty'
                });

                var item2 = new Ext.Panel({
                    title: 'Accordion Item 2',
                    html: '&lt;empty panel&gt;',
                    cls:'empty',
                tbar: {
                    items: [{
                        xtype: 'combo',
                        allowBlank: false,
                        editable: false,
                        triggerAction: 'all',
                        width: 120,
                        store: [[ 0, 0 ], [ 1, 1 ], [ 2, 2 ], [ 3, 3 ]],
                        value: 0
                    }]
                }
                });

                var item3 = new Ext.Panel({
                    title: 'Accordion Item 3',
                    html: '&lt;empty panel&gt;',
                    cls:'empty'
                });

                var item4 = new Ext.Panel({
                    title: 'Accordion Item 4',
                    html: '&lt;empty panel&gt;',
                    cls:'empty'
                });

                var item5 = new Ext.Panel({
                    title: 'Accordion Item 5',
                    html: '&lt;empty panel&gt;',
                    cls:'empty'
                });

                var accordion = new Ext.Panel({
                    region:'west',
                    margins:'5 0 5 5',
                    split:true,
                    width: 210,
                    layout:'accordion',
                    items: [item1, item2, item3, item4, item5]
                });

                var viewport = new Ext.Viewport({
                    layout:'border',
                    items:[
                        accordion, {
                        region:'center',
                        margins:'5 5 5 0',
                        cls:'empty',
                        bodyStyle:'background:#f1f1f1',
                        html:'<br/><br/>&lt;empty center panel&gt;'
                    }]
                });
            });
        </script>
    </head>
    <body>
    <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
    </body>
    </html> 

  8. #8
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    I was able to confirm this using your code. EXTJSIII-51

    To get around this until there is a fix, you can use:

    Code:
    {
        xtype       : 'panel',
        width       : 80,
        autoHeight  : true,
        layout      : 'fit',
        bodyBorder  : false,
        frame       : false,
        border      : false,
        bodyStyle   : 'background-color: transparent; padding-top: 2px;',
        items :[
            {
                xtype: 'combo',
                allowBlank: false,
                editable: false,
                triggerAction: 'all',
                width: 120,
                store: [[ 0, 0 ], [ 1, 1 ], [ 2, 2 ], [ 3, 3 ]],
                value: 0
            }
        ]
    }
    Scott.

  9. #9
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default


    Thanks, your fix using 'fit' is good for combobox. However, the my toolbar items are not align in the bar any more, it is align vertically.

    PHP Code:

    <html>
    <
    head>
        <
    title>Accordion Layout</title>
        <
    link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

        <!-- 
    GC -->
        <!-- 
    LIBS -->
        <
    script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <!-- ENDLIBS -->

        <script type="text/javascript" src="../../ext-all.js"></script>

        <style type="text/css">
            html, body {
                font: normal 12px verdana;
                margin: 0;
                padding: 0;
                border: 0 none;
                overflow: hidden;
                height: 100%;
            }
            .empty .x-panel-body {
                padding-top:20px;
                text-align:center;
                font-style:italic;
                color: gray;
                font-size:11px;
            }
        </style>
        <script type="text/javascript">
            Ext.onReady(function() {

                var item1 = new Ext.Panel({
                    title: 'Accordion Item 1',
                    html: '&lt;empty panel&gt;',
                    cls:'empty'
                });


                var item2 = new Ext.Panel({
                    title: 'Accordion Item 2',
                    html: '&lt;empty panel&gt;',
                    cls:'empty',
                tbar: {
                        layout      : 'fit',
                    items: [{
                        xtype: 'combo',
                        allowBlank: false,
                        editable: false,
                        triggerAction: 'all',
                        name: 'aaa',
                        width: 120,
                        store: [[ 0, 0 ], [ 1, 1 ], [ 2, 2 ], [ 3, 3 ]],
                        value: 0
                    }, '->', {
                           xtype: 'tbtext', 
                           text: 'Item 2'
                    }, {
                           xtype: 'tbtext', 
                           text: 'Item 3'
                    }, {
                           xtype: 'tbtext', 
                           text: 'Item 4'
                    }]
                }
                });

                var item3 = new Ext.Panel({
                    title: 'Accordion Item 3',
                    html: '&lt;empty panel&gt;',
                    cls:'empty'
                });

                var item4 = new Ext.Panel({
                    title: 'Accordion Item 4',
                    html: '&lt;empty panel&gt;',
                    cls:'empty'
                });

                var item5 = new Ext.Panel({
                    title: 'Accordion Item 5',
                    html: '&lt;empty panel&gt;',
                    cls:'empty'
                });

                var accordion = new Ext.Panel({
                    region:'west',
                    margins:'5 0 5 5',
                    split:true,
                    width: 210,
                    layout:'accordion',
                    items: [item1, item2, item3, item4, item5]
                });

                var viewport = new Ext.Viewport({
                    layout:'border',
                    items:[
                        accordion, {
                        region:'center',
                        margins:'5 5 5 0',
                        cls:'empty',
                        bodyStyle:'background:#f1f1f1',
                        html:'<br/><br/>&lt;empty center panel&gt;'
                    }]
                });
            });
        </script>
    </head>
    <body>
    <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
    </body>
    </html> 

  10. #10
    Sencha User
    Join Date
    May 2012
    Posts
    6
    Vote Rating
    0
    rematnarab is on a distinguished road

      0  

    Default


    Hello,
    I could not find the solution anywhere else,
    Did you manage to solve the problem ?