1. #11
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    108
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    +1

    It is reproducible on my Windows 7 in Chrome.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  2. #12
    Sencha Premium Member
    Join Date
    Jan 2009
    Posts
    318
    Vote Rating
    47
    firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about

      0  

    Default


    I tried comparing the code between 4.1 and 4.2 and I think it might be a bug in the auto layout. I tried setting the default layout on tips to 'fit' to try and bypass this. It seems to work for me in Chrome, FF, and IE < 10. I don't have 10 in front of me to test with at the moment, but if someone else would like to try it...

    Code:
            
            Ext.override(Ext.tip.Tip, {
                layout: 'fit'
            });
        
            Ext.QuickTips.init();
    I'm still new to 4.x and wasn't sure about updating a config option after QuickTips.init, hence the override above the init.

  3. #13
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    118
    Vote Rating
    4
    john76543 is an unknown quantity at this point

      0  

    Default


    I still get some problems on IE10 with the layout: 'fit' patch.

  4. #14
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    118
    Vote Rating
    4
    john76543 is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by firefoxSafari View Post
    Code:
     .x-tip {
      width: auto !important;
     }
     
     .x-tip-body {
      width: auto !important;
     }
     
     .x-tip-body span {
      width: auto !important;
     }
    Tooltips are used everywhere. This is a serious problem and Sencha needs to respond with a real workaround.
    Unfortunately this patch doesn't work for me in all cases on IE10.

    Come on Sencha, fix it!

  5. #15
    Sencha Premium Member
    Join Date
    Jan 2009
    Posts
    318
    Vote Rating
    47
    firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about

      0  

    Default


    Debugged this some more and think a workaround might be changing component layout to auto rather than dock. I tried this and it appears to work in IE <= 10, newest Chrome, and FF.


    Code:
      Ext.override(Ext.tip.Tip, {
       componentLayout: {
        type: 'auto'
       }
      });
     
      Ext.QuickTips.init();
    Still waiting for the best official word from Sencha, but I think this will work for me.

  6. #16
    Sencha Premium Member
    Join Date
    Jan 2009
    Posts
    318
    Vote Rating
    47
    firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about

      2  

    Default


    Component layout auto had the unfortunate side effect of removing explicitly set width on qtips. I decided to delete minWidth property since I know this works on Chrome and then use componentLayout fieldset on IE10 just cause it happened to look like it rendered ok.

    Not claiming this is a good solution, just an ugly hack until Sencha fixes this or we did into the layout engine and fix the real problem.

    Code:
      delete Ext.tip.Tip.prototype.minWidth;
      
      if(Ext.isIE10) { 
       Ext.override(Ext.tip.Tip, {
        componentLayout: {
         type: 'fieldset',
         getDockedItems: function() {
          return [];
         }
        }
       });
      }
       
      Ext.QuickTips.init();

  7. #17
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    118
    Vote Rating
    4
    john76543 is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by firefoxSafari View Post
    Code:
      delete Ext.tip.Tip.prototype.minWidth;
      
      if(Ext.isIE10) { 
       Ext.override(Ext.tip.Tip, {
        componentLayout: {
         type: 'fieldset',
         getDockedItems: function() {
          return [];
         }
        }
       });
      }
       
      Ext.QuickTips.init();
    Looks like you nailed it! Thanks, that's a life saver.

  8. #18
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    108
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    @firefoxSafari, thank you, your last workaround helps.

    Though, there is the strange behavior in Chrome if update a tooltip calling its update method. We use in a tooltip for a grid rows. The fist time a tooltip is ok, the second - narrow, 3rd - again ok, 4th - narrow, etc.

    Strange, still no attention from Sencha.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  9. #19
    Touch Premium Member
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    311
    Vote Rating
    51
    droessner is a jewel in the rough droessner is a jewel in the rough droessner is a jewel in the rough

      1  

    Default


    This is the override I came up with. It needs to be defined prior to the quicktips being initialized. This should also fix any error quicktips. Haven't tested this on all browsers yet, but it's probably just a matter of adjusting the offsets if it still doesn't size correctly in certain browsers.

    Code:
    Ext.define('HCS.overrides.tip.QuickTip', {
        override: 'Ext.tip.QuickTip',
        helperElId: 'ext-quicktips-tip-helper',
        initComponent: function() {
            this.callParent();
            this.on('move', function() {
                var offset = this.hasCls('x-tip-form-invalid') ? 35 : 12,
                    helperEl = Ext.fly(this.helperElId) || Ext.fly(
                        Ext.DomHelper.createDom({
                          tag: 'div',
                          id: this.helperElId,
                          style: {
                              position: 'absolute',
                               left: '-1000px',
                               top: '-1000px',
                               'font-size': '11px',
                               'font-family': 'tahoma, arial, verdana, sans-serif'
                          }
                        }, Ext.getBody())
                    );
    
    
                if (this.html && (this.html !== helperEl.getHTML() || this.getWidth() !== (helperEl.dom.clientWidth + offset))) {
                    helperEl.update(this.html);
                    this.setWidth(Ext.Number.constrain(helperEl.dom.clientWidth + offset, this.minWidth, this.maxWidth));
                }
            }, this);
        }
    });

  10. #20
    Sencha Premium Member
    Join Date
    Jan 2009
    Posts
    318
    Vote Rating
    47
    firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about

      0  

    Default


    Quote Originally Posted by droessner View Post
    This is the override I came up with. It needs to be defined prior to the quicktips being initialized. This should also fix any error quicktips. Haven't tested this on all browsers yet, but it's probably just a matter of adjusting the offsets if it still doesn't size correctly in certain browsers.

    Code:
    Ext.define('HCS.overrides.tip.QuickTip', {
        override: 'Ext.tip.QuickTip',
        helperElId: 'ext-quicktips-tip-helper',
        initComponent: function() {
            this.callParent();
            this.on('move', function() {
                var offset = this.hasCls('x-tip-form-invalid') ? 35 : 12,
                    helperEl = Ext.fly(this.helperElId) || Ext.fly(
                        Ext.DomHelper.createDom({
                          tag: 'div',
                          id: this.helperElId,
                          style: {
                              position: 'absolute',
                               left: '-1000px',
                               top: '-1000px',
                               'font-size': '11px',
                               'font-family': 'tahoma, arial, verdana, sans-serif'
                          }
                        }, Ext.getBody())
                    );
    
    
                if (this.html && (this.html !== helperEl.getHTML() || this.getWidth() !== (helperEl.dom.clientWidth + offset))) {
                    helperEl.update(this.html);
                    this.setWidth(Ext.Number.constrain(helperEl.dom.clientWidth + offset, this.minWidth, this.maxWidth));
                }
            }, this);
        }
    });
    I think this looks good for basic tooltip sizing. I'm not sure it takes into account explicitly set width, though. For example, I tried data-qwidth and it always resized to the content rather than honoring the width I had set. Probably fixable, though - looks like we're getting closer to a real solution.