Results 1 to 7 of 7

Thread: Button in toolbar not vertically centered

  1. #1
    Sencha User
    Join Date
    Dec 2012
    Location
    Spain
    Posts
    7
    Vote Rating
    1
      0  

    Default Button in toolbar not vertically centered

    Hi, I have a tab bar with 3 tabs and a toolbar docked to the top of the screen. One of those tabs display a list with items. When I click on an item it takes me to the item description panel. When on the description panel I add a button dynamically to the top toolbar which lets you return to the items list:

    Code:
    //this is the code in the Controller for the itemtap event of the List
    
    var tabs = this.getMainTabPanel();
    var ppanel = this.getProjectPanel();
    
    //1st display the projects panel
    tabs.setActiveItem(3);
    
    //add a button to return to the list
    var header = tabs.query('#header')[0];
    
    header.add( Ext.create('Ext.Button',{ 
                    ui: 'back', 
                    text: "return",
                    docked:'left',
                    id: 'btnBack', 
                    listeners: { 'tap': 
                        function (b, e) {
                                                    tabs.setActiveItem(1);
                            b.destroy(); /* destroy the button */
                        } 
                    }
    }));
    Well, this button is not vertically aligned at all. I have tried all possible combinations with docked and align to no avail.

    I attached a small screenshot of the top left corner of the browser (in brown), so you can see the output.

    button.png

    The only way to align it vertically is through CSS by modifying the top padding and margin :/

    Any ideas?

    Thanks.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    So you have a tab panel and it has a toolbar with a return button? The return button sets the active item of the tab panel? Isnt' that what the tab bar is for?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Dec 2012
    Location
    Spain
    Posts
    7
    Vote Rating
    1
      0  

    Default

    I have a tabpanel docked bottom and a toolbar, docked top. One of the items/tabs, is a list. If you 'itemtap' one item of that list, it takes you to a new Panel (a hidden panel, not present in the tabs list of the tabpanel and therefore not selectable from anywhere else), with the description of the item tapped. When on that panel I dynamically add a button to the toolbar to return to the list and hide this description panel.

    Anyway, that doesn't matter. The point is that the button dynamically added is not vertically aligned in the toolbar.

  4. #4
    Sencha User
    Join Date
    Nov 2012
    Posts
    5
    Vote Rating
    1
      0  

    Default Same Problem

    I have a toolbar with three buttons, all three buttons are vertically aligned at the top and not in the middle. In another panel I have the same toolbar at the top and a different one at the bottom with two buttons. The toolbar at the bottom also has the buttons vertically aligned at the top of the toolbar and not in the middle.

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    5
    Vote Rating
    1
      1  

    Default Solved for me..

    Not sure this is the same problem you're having, but I was using 'docked' as an attribute for my buttons so they looked like:

    Code:
    {
         xtype: 'button',
         iconMask: true,
         iconCls: 'add',
         docked: 'left',
         handler: function () {
                // code here...
         }
    }
    i took out the docked attribute and put in a spacer (like toolbars are suppose to have) and the buttons realigned vertically to the middle of the toolbar.

  6. #6
    Sencha User
    Join Date
    Dec 2012
    Location
    Spain
    Posts
    7
    Vote Rating
    1
      0  

    Default

    Unfortunately that didn't work for me

    I fixed it through CSS although it is a bit of a hack :/

  7. #7
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    45
    Vote Rating
    0
      0  

    Default

    That did the trick for me. If there are more then one button make sure all the buttons have the docked property set to "none".

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •