[2.??] ComboBox inside a table alignment issue

[nmorado]

Looks like a combobox's arrow trigger inside a table is not aligning properly in IE8.

Has anyone encountered this?

[tryanDLS]

Please read http://extjs.com/forum/showthread.php?t=13985 before posting in Bugs.

[Condor]

That is because the vertical-align of the text field and the trigger are different.

Try if this helps:

<style type="text/css">
.x-form-field-wrap {position: static;}
.x-form-field-wrap .x-form-trigger {position: static; top: auto; vertical-align: middle;}
.x-form-field-wrap .x-form-twin-triggers .x-form-trigger {position: static; top: auto; vertical-align: middle;}
</style>

[Animal]

I noticed what looked like a trigger vertical align problem on IE8 last night.

Turned out there was an IE-only CSS rule which have the <input> element a margin-top of -1px

Anyone know what that's there?

.ext-ie .x-form-text {
    margin:-1px 0; /* ie bogus margin bug */
    height:22px; /* ie quirks */
    line-height:18px;
}

[beng_06]

If i change the value of margin from -1px to 1px, the alignment in ie8 is correct but not in ie7 and ie6. how can i only call a specific class for ie8 only for this?thanks

[nmorado]

Condor, problem still persists.

The work-around (not an elegant way) we did was after detecting it is IE8, then we override the style with the below:

<!-- Checks if ie8, then change styles -->
.ext-ie .x-form-text{margin:1px 0;height:22px;line-height:18px;}

We adjusted the margin from -1px to 1px

[Condor]

In Ext 2.2.1 and up you can use:

.ext-strict .ext-ie8 .x-form-text {margin: 1px 0;}

[thrillhouse]

None of these solutions would work for me as I was experiencing the problem inconsistently - (not all combos were broken, just some). We're still stuck on Ext2.3.0.

The following is a god awful hack to treat the symptoms of the problem but it worked for me. Please feel free to comment / criticise.

/*
 * Nasty hack to prevent IE from rendering combo box triggers
 * out of alignment with their textfield companions.
 */
Ext.override(Ext.form.ComboBox, {
  afterRender: function() {
    var top_of_el = this.el.getTop(); //get the top of the textfield element
    var top_of_trigger = this.trigger.getTop(); //get the top of the trigger element
    var difference = false;

    //assess whether the top of the textfield element is less
    //than the top of the trigger element.
    if (top_of_el < top_of_trigger) {
      difference = top_of_trigger - top_of_el;
    }

    //if we found a difference, and we're in IE
    if (difference && Ext.isIE) {
      // call the superclass first, then move the text element up.
      // NOTE - it is important we call the superclass here for two reasons:
      //   1. Calling it prior to this point will erroneously report that the tops
      //      of both elements are in the same spot (when they're clearly not).
      //   2. Calling it after we move the text element up will reset the positioning
      //      of the text element back to the wrong spot.
      Ext.form.ComboBox.superclass.afterRender.call(this);
      this.el.move('up', difference);
    } else {
      //call the superclass
      Ext.form.ComboBox.superclass.afterRender.call(this);
    }
  }
});