Sencha panel is docked to left side and overrides my settings

Below is my code for a popup view.

It works perfectly, the the problem is that even if I set "left: 10%" it is ignoring this setting and when it generates a popup it is created with "left: 0px".

I want to absolutely center it with 10% margin.

HTML from chrome developer (problem marked in red):

Code:

<div class="x-container x-panel x-paint-monitored x-sized activityDetailsView x-floating" id="ext-activitydetails-2" style="top: 10% !important; right: 10% !important; bottom: 10% !important; left: 0px  !important; z-index: 12 !important;">

View:

Code:

Ext.define('MyApp.view.activity.Details', {


    extend: 'Ext.Panel',


    xtype: 'activitydetails',


    config: {


        cls: 'activityDetailsView',
        modal: true,
        styleHtmlContent: true,
        hideOnMaskTap: true,
        top: '10%',
        right: '10%',
        bottom: '10%',
        left: '10%', 
        scrollable: true,
        centered: true,


    },


    initialize: function() {


        var data = this.config.data;
        var template = Ext.create('Ext.XTemplate', 'somehtml');
        var html = template.apply(data);
        this.setHtml(html);


    }


});

Sencha panel is docked to left side and overrides my settings