HTML in toolbar misaligned when adding button

[matfin]

Hi Folks,

I have a problem with misaligned HTML in a top docked toolbar when buttons are added to it. The content of the html is pushed to the far left when I want it to be in the center of the toolbar. Here is the code I am working with.

Ext.define('Application.view.Stats', {
	extend: 'Ext.tab.Panel',
	xtype: 'statspanel',
	config: {
		fullscreen: true,
		title: 'Stats',
		iconCls: 'action',
		scrollable: true,			                
	    items: [{
	        docked: 'top',
			xtype: 'toolbar',
			id: 'toolbar-home',
			html: '<div class="logo"><div class="wrapper"><img src="/resources/icons/logo.png"; /><div class="text-logo"><h1>MainHeading</h1><h2>#HashTag</h2></div></div></div>',
			items:	[
			{
				hidden: true,
				xtype: 'button',
				text: 'Back',
				ui: 'back',
				id: 'buttononeid'
			},
			{
				hidden: true,
				xtype: 'button',
				text: 'Back',
				ui: 'back',
				id: 'buttontwoid'	
			}]

		},
		{
			xtype: 'panelone',
		},
		{
			xtype: 'paneltwo'
		},
		{
			xtype: 'panelthree'
		},
		]
	}

});

If I remove the buttons the content defined within 'html' for the docked toolbar centers fine, but with the buttons the content floats to the far left of the screen when i need it to be centered. Is there an easy and non-hacky way to do this? I've searched Google and so far have had no luck.

Thanks

[mitchellsimoens]

Where are you wanting the html to show? In the center?

[matfin]

Yep - in the center. I actually came up with an alternative way to do this, not something I would call a solution but it worked for me.

I removed the html from the toolbar and the title attribute and just added a 'cls' attribute and put the stylesheet rules into the app.scss. I have included the code below:

My view contains the following code

Ext.define('Application.view.HomeLanding' , {
	extend: 'Ext.Panel',
	xtype: 'homelandingpanel',
	config: {
		fullscreen: true,
		layout: 'vbox',
		items:[
			{
				docked: 'top',
				xtype: 'toolbar',
				cls: 'generic-toolbar'				
},
                      ]
                }
}

My css contains the following code

.generic-toolbar{
  background-image: none;
  background-color: #fff;
  border-bottom: 1px solid #898989;
  border-top: 3px solid #00a651;
  text-align:center;
  line-height:18px;
  background: url('../icons/logo.png') no-repeat center center;
  background-size: contain;
}

Hope this helps somebody and it is perhaps a more graceful approach to the problem I was trying to solve.
The logo.png is an image file containing the text that was in the main heading and hashtag.