Combo trigger icon appearing on left of textfield

[karnak]

Greetings!

I have a Window that contains a form which contains tab control with a few tabs. One of the tabs contains a few combos that contain listings of countries and states. For some reason, the dropdown trigger icon for the combos are appearing on the left of the text field portion of the combos, and overlapping the first couple of characters of the string. This only happens in Safari and Chrome. It seems to work fine in Firefox. Any quick suggestions on what may be causing this?

Thanks!

[jay@moduscreate.com]

could your layout not be properly configured? Are you using 3.3.1?

[karnak]

I am using 3.3.1. I was inspecting the element from within Chrome and found that the following setting in the ext-all.css file was causing/affecting this:

.ext-strict .ext-ie8 .x-toolbar-cell .x-form-field-trigger-wrap .x-form-trigger {
    right: 0; /* IE8 Strict mode trigger bug */
}

If I removed the 'right: 0', then the trigger image appeared on the right of the text field portion of the combo, where I would naturally expect it. However, I am afraid that if I remove this from the CSS, I solve this issue, but I am not sure what other issues I will possibly be causing elsewhere.

[jay@moduscreate.com]

are you using strict doc type?

that selector will only work for the body element where ext-strict and ext-ie8 classes are applied.

[presta34]

I know the same issue with ExtJs 3.4 and IE 8...

As Karnac said, the problem comes from the ext-all.css file:

.ext-strict .ext-ie8 .x-toolbar-cell .x-form-field-trigger-wrap .x-form-trigger {     
 right: 0; /* IE8 Strict mode trigger bug */
 }

I would like to know how to override this css without changing the source file?
I've tried to call removeClass() on my combo but nothing has changed... The triggered always appears on left side instead of the right side..

skillSelectBox.removeClass('ext-strict ext-ie8 x-toolbar-cell x-form-field-trigger-wrap x-form-trigger');

here is my combo:

var skillSelectBox = new Ext.form.ComboBox({
        store: availableSkillStore,
        id:'skillSelectBox',
        name:'skillSelectBox',
        hideMode:'offsets',
        labelStyle: 'width: 75px',
        displayField: "skillLabel",
        valueField: "skillKeyWord",
        emptyText: Label.STAT_Quellecompetence,
        hideLabel: true,
        typeAhead: false,
        forceSelection:true,
        resizable: true,
        editable : false,
        triggerAction: "all",
        width: 150,
        mode: 'local'
    });

this combo is in a toolbar:

var toolBar = new Ext.Toolbar({
        layout: 'toolbar',
        hideMode:'offsets',
        items:[skillSelectBox, '->',addButton]
    });

which is in a grid panel:

var skillGrid = new Ext.grid.EditorGridPanel({
        id: "skillGrid",
        name: "skillGrid",
        store: selectedSkillStore,
        hideMode:'offsets',
        plugins: [rowActions],
        autoHeight: true,
        boxMinHeight : 240,
        width: 350,
        autoExpandColumn : "skillLabel",
        tbar: toolBar,
        bodyCssClass: "form-grid-body-style",
        cm: new Ext.grid.ColumnModel({
            columns :[
                {
                    header: Label.all.Skills,
                    dataIndex: 'skillLabel',
                    menuDisabled: true,
                    width: 235
                },
                {
                    header: Label.CONF_GATE_Ageing,
                    dataIndex: 'ageing',
                    menuDisabled: true,
                    align:'center',
                    editor: ageingNumberField,
                    width: 80
                },
                rowActions
            ]
        }),
        listeners:{
            afterrender : function(thisGrid){
                toJsonObject();
            },
            afteredit:function(e){
                toJsonObject();
            },
            validateedit:function(e){
                toJsonObject();
            }
        },
        viewConfig: {scrollOffset: 0, forceFit:true}
    });

[dblak90]

In your project's css you can place the following to override the ext-all.css:

.ext-strict .ext-ie8 .x-toolbar-cell .x-form-field-trigger-wrap .x-form-trigger {
    right: auto !important; /* IE8 fix for ext-all.css */
}