ExtJs 6.5.2 modern - Remove loadmask message

Question

I am using a loadmask that the html property holds all the loading content. The problem that i am facing is that even if message property's value is an empty string, message allocates space inside the loadmask producing something like a dash on the left of my html message.

(Add the code bellow to a Sencha Fiddle)

Ext.application({
name : 'Fiddle',

launch : function() {
    Ext.create({
       xtype: 'panel',
       fullscreen: true,
       html: '<h1>Hello World !!!</h1>',
       listeners: {
           painted: function (panel) {
               panel.mask({
                    xtype: 'loadmask',
                    html: '<div align="center"><h3>Loading Mask</h3>' + 
                    '<p>i am loading...</p></div>',
                    message: '', //empty message holds its opacity
                    indicator: false,
                    style: 'background:#d7ecfd' 
               });
           }
       }
    });
}
});

How can i remove or make that space transparent? Modern Toolkit does not have the useMsg property.

I've tried setting the background property (background: transparent) at messageCls but nothing happened.

Answer 1

I guess the sencha devs never thought of a scenario where the message field would go empty.

However you can correct it by adding the below style in the html.

<style>.x-mask-inner{background:rgba(0, 0, 0, 0) !important}</style>