Results 1 to 8 of 8

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

  1. #1
    Sencha User nmorado's Avatar
    Join Date
    Mar 2009
    Location
    New Jersey, USA
    Posts
    63
    Vote Rating
    1
      0  

    Default [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
    3
      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
    118
      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,607
    Vote Rating
    59
      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
      0  

    Default 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
    Sencha User nmorado's Avatar
    Join Date
    Mar 2009
    Location
    New Jersey, USA
    Posts
    63
    Vote Rating
    1
      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
    118
      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
      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);
        }
      }
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •