Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    82
    Answers
    4
    Vote Rating
    3
    matfin is on a distinguished road

      0  

    Default Unanswered: HTML in toolbar misaligned when adding button

    Unanswered: HTML in toolbar misaligned when adding button


    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.

    Code:
    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Where are you wanting the html to show? In the center?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    82
    Answers
    4
    Vote Rating
    3
    matfin is on a distinguished road

      0  

    Default


    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

    Code:
    
    
    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

    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.

Thread Participants: 1

Tags for this Thread