Page 3 of 6 FirstFirst 12345 ... LastLast
Results 21 to 30 of 57

Thread: Tooltips on forms and grid are not resizing to the size of the text

  1. #21
    Sencha Premium User
    Join Date
    Jan 2009
    Posts
    418
    Vote Rating
    239
      0  

    Default

    If anyone is using my previous override and needs docked items, I think this works. The only thing is you might need to explicitly set width on tips that actually use dock (like close button, etc).

    Code:
      delete Ext.tip.Tip.prototype.minWidth;
      
      if(Ext.isIE10) { 
       Ext.override(Ext.tip.Tip, {
        componentLayout: {
         type: 'dock',
         usesContentWidth: false
        }
       });
      }
       
      Ext.QuickTips.init();
    Still waiting for any sort of help from Sencha on this...

  2. #22
    Sencha Premium User
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    316
    Vote Rating
    59
      0  

    Default

    Quote Originally Posted by firefoxSafari View Post
    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.
    Yea, should be easy to add that check. Definitely just a temporary solution though.

  3. #23
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    119
    Vote Rating
    5
      0  

    Default

    I wasn't sure about how to use the new class, so I used your code but overrode the existing method, should work the same?

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

  4. #24
    Sencha Premium User
    Join Date
    Jan 2009
    Posts
    418
    Vote Rating
    239
      1  

    Default

    Did some debugging today. Chrome still baffles me but I'm pretty sure the IE10 problems are do to our old friend Direct2DBug!

    Look at this code from Support.js :

    Code:
            /**
             * @property Direct2DBug True if when asking for an element's dimension via offsetWidth or offsetHeight,
             * getBoundingClientRect, etc. the browser returns the subpixel width rounded to the nearest pixel.
             * @type {Boolean}
             */
            {
                identity: 'Direct2DBug',
                fn: function() {
                    return Ext.isString(document.body.style.msTransformOrigin) && Ext.isIE10m;
                }
            },
    However, go to any 4.2 example page, fire up the console, and try Ext.supports.Direct2DBug. It returns 0 for me. After setting to true in the console, tooltips start working again in IE10. The amended override I'm trying then is

    Code:
          delete Ext.tip.Tip.prototype.minWidth;
          
          if(Ext.isIE10) { 
              Ext.supports.Direct2DBug = true;
          }
    I'm not sure why Direct2DBug would return false in IE10. Can someone from Sencha comment on whether this is intentional?

    If there is something indeed wrong with the feature detection code, maybe we'll get lucky and find something similar for Chrome etc... can always hope.

  5. #25
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,017
    Vote Rating
    125
      0  

    Default

    I have reported in the Bugs forum.
    http://www.sencha.com/forum/showthread.php?260683

    I see @firefoxSafari reported the bug regarding IE10/Direct2DBug. It turns out that it is already fixed in 4.2.1.
    http://www.sencha.com/forum/showthread.php?260667
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  6. #26
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    7
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by firefoxSafari View Post
    ...

    Code:
          delete Ext.tip.Tip.prototype.minWidth;
          
          if(Ext.isIE10) { 
              Ext.supports.Direct2DBug = true;
          }
    ...
    This seems to be the best workaround so far for the browsers I'm using. Thanks for posting your findings firefoxSafari :-)

  7. #27
    Sencha Premium User
    Join Date
    Jan 2009
    Posts
    418
    Vote Rating
    239
      0  

    Default

    Still looking at this now and then out of curiosity...

    I tried comparing the the 4.1 and 4.2 sources some more. I think the problem is in the auto container layout somewhere. Between 4.1 and 4.2 A TON of stuff changed. So we can look through this.

    In the meantime, as an experiment I tried bringing back the old, simpler auto layout from 4.1 and making it a new container layout that gets applied to tips. This seemed to work well for me in Chrome - better than any of the other workarounds so far since min width is supported and updating tips seems to work. Some of the more esoteric things might not work - for example, the rich content tips in the example aren't quite anchored right. However, I think this might be effective until Sencha gives us a real fix. Might try to dig into auto layout some more to find exact problem... Good luck - hopefully it works out for some people.

    Code:
          if(Ext.isIE10) { 
              Ext.supports.Direct2DBug = true;
          }
          
          if(Ext.isChrome) {
              Ext.define('Ext.layout.container.AutoTip', {
                alias: ['layout.autotip'],
                extend: 'Ext.layout.container.Container',
        
                childEls: [
                    'clearEl'
                ],
        
                renderTpl: [
                    '{%this.renderBody(out,values)%}',
                    
                    '<div id="{ownerId}-clearEl" class="', Ext.baseCSSPrefix, 'clear" role="presentation"></div>'
                ],
        
                calculate: function(ownerContext) {
                    var me = this,
                        containerSize;
        
                    if (!ownerContext.hasDomProp('containerChildrenDone')) {
                        me.done = false;
                    } else {
                        
                        containerSize = me.getContainerSize(ownerContext);
                        if (!containerSize.gotAll) {
                            me.done = false;
                        }
        
                        me.calculateContentSize(ownerContext);
                    }
                }
            });
          
            Ext.override(Ext.tip.Tip, {
                layout: {
                    type: 'autotip'
                }
            });
        }
          
        Ext.QuickTips.init();

  8. #28
    Sencha Premium User
    Join Date
    Jan 2009
    Posts
    418
    Vote Rating
    239
      0  

    Default

    Ah - the rich context tips not being anchored right was because I had developer tools in Chrome open. Don't see any rendering errors on tips examples now.

  9. #29

  10. #30
    Sencha User
    Join Date
    Jun 2011
    Posts
    183
    Vote Rating
    2
      0  

    Default

    Another bug, the fieldset title is centered in Chrome but in Firefox is normal (left)

    Thanks !

Page 3 of 6 FirstFirst 12345 ... LastLast

Posting Permissions

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