Ext.draw.Text on a Ext.toolbar.Toolbar in FIrefox 14 Not Displaying Correctly

**otasyn** · 17 Jul 2012 5:38 PM

I'm almost certain that this is a bug with Firefox 14 because this works just fine in Firefox 13 (and IE 9 and Chrome).

Consider this example (this exists in 4.1.1 as well.):

HTML Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Test ExtJS 4.1.0</title>
        <link rel="stylesheet" type="text/css" href="/js/sencha/extjs-4.1.0/resources/css/ext-sandbox.css" />
        <script type="text/javascript" src="/js/sencha/extjs-4.1.0/builds/ext-all-sandbox-debug.js"></script>
        <script type="text/javascript">

Ext4.onReady(function() {
    Ext4.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            html: '<h1 class="x-panel-header">Test ExtJS 4.1.0</h1>',
            border: false,
            margins: '0 0 5 0'
        }, {
            region: 'center',
            xtype: 'panel',
            items: {
                title: 'Main Panel',
                html: 'Content here.'
            },
            bbar: {
                xtype: 'toolbar',
                items: [{
                    xtype: 'text',
                    text: 'Text Here (Ext.draw)'
                },{
                    text: 'Button'
                },
                'Text Here (Ext.toolbar.TextItem)']
            }
        }]
    });
});

        </script>
    </head>
    <body></body>
</html>

In Firefox 14, only the top-half of the text is shown at the bottom of it's section on the toolbar. (It's possible that the text is centered on the bottom of the drawing area instead of centered on the middle.)

Ext.draw.Text on Ext.toolbar.Toolbar Problem.png

By the way, using Ext.draw.Text in the toolbar may be overkill here since all that is really needed is Ext.toolbar.TextItem (same as simply putting a String in the items array). However, I'm wondering if what I've found is just one noticeable symptom of another problem.

**mitchellsimoens** · 20 Jul 2012 8:26 AM

Also try outside of the sandbox mode. But I'm not seeing why this shouldn't work in FF 14

**circusfr** · 28 Jul 2012 5:18 AM

Hi,

an issue in dy attribute ? Maybe the solution will be more complicated, 6 instead of 4 in Ext.draw.engin.Svg

Code:

Ext.override(Ext.draw.engine.Svg, {
    tuneText: function (sprite, attrs) {
        var el = sprite.el.dom,
            tspans = [],
            height, tspan, text, i, ln, texts, factor, x;

        if (attrs.hasOwnProperty("text")) {            
            text = sprite.tspans && Ext.Array.map(sprite.tspans, function(t) { return t.textContent; }).join('');

            if (!sprite.tspans || attrs.text != text) {
                tspans = this.setText(sprite, attrs.text);
                sprite.tspans = tspans;
            } else {
                tspans = sprite.tspans || [];
            }
        }
        
        if (tspans.length) {
            height = this.getBBoxText(sprite).height;
            x = sprite.el.dom.getAttribute("x");
            for (i = 0, ln = tspans.length; i < ln; i++) {
                factor = (Ext.isFF3_0 || Ext.isFF3_5) ? 2 : 6;
                tspans[i].setAttribute("x", x);
                tspans[i].setAttribute("dy", i ? height * 1.2 : height / factor);
            }
            sprite.dirty = true;
        }
    }
});

**Hanterdro** · 8 Aug 2012 3:09 AM

I can confirm this bug with firefox 14 in my project.

Firefox 13 worked fine.

**fitzman49** · 10 Aug 2012 7:32 AM

Verified this happens using a collapsed panel with the panel title set as well . Tested in Firefox 14.0.1. Panel title text renders correctly in Chrome 21 and IE 9 when collapsed. I know this is not related to the toolbar problem but figure it may be a bigger issue so adding my $.02.

CutoffCollapsed.PNG

**evant** · 13 Aug 2012 2:56 PM

I can reproduce this, however I don't think it's an Ext or FF bug. Can you try running FF in safe mode and seeing if it looks correct? I think it might be an addon compatibility problem.

**evant** · 14 Aug 2012 12:03 AM

On further investigation, it seems to be related to hardware acceleration. To test:

1) Go to options,
2) Advanced, general
3) Uncheck "Use hardware acceleration when available"
4) Restart browser
5) Reopen page

I've opened a ticket on Bugzilla, so we'll see what they say.

**fitzman49** · 14 Aug 2012 5:26 AM

Originally Posted by evant

On further investigation, it seems to be related to hardware acceleration. To test:

1) Go to options,
2) Advanced, general
3) Uncheck "Use hardware acceleration when available"
4) Restart browser
5) Reopen page

I've opened a ticket on Bugzilla, so we'll see what they say.

Thanks for looking into this Evan. I disabled hardware acceleration in firefox and the issue still persists. Text is still half truncated like my previous screenshot. Let me know if you need any code samples/debug from firebug. I didn't state this earlier but I'm using EXT JS 4.1.1 final.

**evant** · 14 Aug 2012 5:33 AM

To clarify, did you also restart the browser after you set the option? It seems as though it's required to "reset" something.

**evant** · 14 Aug 2012 5:38 AM

Also, for those that are interested, Mozilla has basically said we're on our own with this one anyway, so... looks like we'll need to work around this one.

https://bugzilla.mozilla.org/show_bug.cgi?id=782253

Ext.draw.Text on a Ext.toolbar.Toolbar in FIrefox 14 Not Displaying Correctly

Thread Tools

Search Thread

Display

Ext.draw.Text on a Ext.toolbar.Toolbar in FIrefox 14 Not Displaying Correctly

Ext.draw.Text on a Ext.toolbar.Toolbar in FIrefox 14 Not Displaying Correctly

Tags for this Thread