1. #1
    Ext JS Premium Member nmorado's Avatar
    Join Date
    Mar 2009
    Location
    New Jersey, USA
    Posts
    62
    Vote Rating
    1
    nmorado is on a distinguished road

      0  

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

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


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

    Has anyone encountered this?

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

    Try if this helps:
    Code:
    <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>

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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?

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

  5. #5
    Ext User
    Join Date
    Nov 2008
    Posts
    19
    Vote Rating
    0
    beng_06 is on a distinguished road

      0  

    Default ie6 vs ie7 vs ie8

    ie6 vs ie7 vs ie8


    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

  6. #6
    Ext JS Premium Member nmorado's Avatar
    Join Date
    Mar 2009
    Location
    New Jersey, USA
    Posts
    62
    Vote Rating
    1
    nmorado is on a distinguished road

      0  

    Default


    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

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    In Ext 2.2.1 and up you can use:
    Code:
    .ext-strict .ext-ie8 .x-form-text {margin: 1px 0;}

  8. #8
    Ext User
    Join Date
    Mar 2009
    Posts
    5
    Vote Rating
    0
    thrillhouse is on a distinguished road

      0  

    Default


    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.

    Code:
    /*
     * 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);
        }
      }
    });