1. #1
    Ext JS Premium Member nmorado's Avatar
    Join Date
    Mar 2009
    Location
    New Jersey, USA
    Posts
    45
    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
    2
    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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,483
    Vote Rating
    35
    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
    45
    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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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);
        }
      }
    });

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar