Strange border behind some button [EXTJS 6.5.2]

Question

I'm facing a strange problem with floating buttons. In fact, when I create a button and then re-position it there with setPosition function an under border appears.

More explanation:

I have a interface made for tablet with a lot of button, some are static and some are floating.

Static buttons are created like that in view:

{
    xtype: 'button',
    scale: 'large',
    height: 60,
    width: 60,
    margin: 10,
    ui: 'lstbuttonclrounded-red',
    cls: 'x-btn-action',
    iconCls: 'x-fa fa-arrow-left'
}

And them render like that:

Floating buttons are created like that in view:

{
    xtype: 'panel',
    [...]
    listeners: {
        afterrender: { 
            fn: function(){
                var obj = Ext.create({
                    xtype: 'button',
                    width: 60,
                    height: 60,
                    ui: 'lstbuttonclrounded',
                    iconCls: 'x-fa fa-floppy-o',
                    scale: 'large',
                    scope: this.getController(),
                    floating: true,
                    renderTo: this.body
                });

                this.saveBtn = this.add(obj);

                obj.setPosition(0, 0);
            }
        }
    }
}

After that there are positioning in controller like that:

this.saveBtn.setPosition(this.getWidth()-70, this.getHeight() - 105);

And them render like that:

Here is where the strange border appear...

UIs used are the same where only the color is changed.

Have you ever had a similar problem and if so, have you solved it and how?

Thank you very much for reading me and for taking the time to answer me.

Answer 1

So there is a difference between the fiddle and your application but I think this can help. I am assuming that the problem you are facing is due to standard ext theme CSS. So by default the ext the you chose gives your button a shadow CSS. But you can override it by using the same name. I have edited your fiddle and instead of a floating button I have put your code with the UI thingy you posted here. So there are two different hacks as the button on fiddle have different css and the button with your ui has a different one. had to change the first panel's background to red as the button's icon in white. Your button in the fiddle is using this css:

.x-btn-default-large

So in the html I have added a new style with the same name:

.x-btn-default-large {
background-color: red !important;
border-color: transparent !important;
}

For the UI button it's using this css to add the shadow:

.x-css-shadow

So I tweaked that one to:

.x-css-shadow{
box-shadow: none !important;
}

Please take a look at this fiddle for better explanation. Be sure to check index.html, that's where the main magic happens. Try removing one line from css at a time so you will know what each line does. I am a beginner too. This thing took a bit of playing with console. If you can't get it working then please post a fiddle with your actual code and comment the link. I'll work on it.