Page 2 of 2 FirstFirst 12
Results 11 to 18 of 18

Thread: [Solved] How do I left align button text

  1. #11
    Ext User TheNakedPirate's Avatar
    Join Date
    Aug 2007
    Posts
    100
    Vote Rating
    0
      0  

    Default

    hga77

    What I did was subclass the Button class.

    You can edit the template code to do what you like

    Code:
    template: new Ext.Template(
        '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
        '<td class="x-btn-left"><i> </i></td><td class="x-btn-center x-btn-center-nav"><em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td><td class="x-btn-right"><i> </i></td>',
        "</tr></tbody></table>")

    include the code in my earlier post in your page after all the ext stuff and them add the style to your page as well it will all work for you.

  2. #12
    Ext User
    Join Date
    Aug 2007
    Posts
    26
    Vote Rating
    0
      0  

    Default The solution

    The problem is that the alignment is on the element with a class of "x-btn-center". To solve it, add a style as shown below.

    In your CSS:


    .my-button-name .x-btn-center {
    text-align: left;
    }

    In your Javascript:
    var button = new Ext.Button('my-button',{
    cls: "x-btn-text-icon my-button-name",
    text: "Press me!",
    })

  3. #13
    Ext User
    Join Date
    May 2009
    Posts
    214
    Vote Rating
    0
      0  

    Default

    This is not working for me, i have a treepanel with a tbar and bbar. the tbar was suposed to have two buttons aligned to the left but i cant align the second right after the first:

    css:
    Code:
    .my-button-name .x-btn-center {
    text-align: left;
    }
    </style>
    Code:
    Ext.onReady(function(){
    
        var expandir= new Ext.Button({
    
            text:'Expandir todos.',
            cls: "my-button-name",
            handler: function(){tree.expandAll();}
    
        })
    
        var colapsar= new Ext.Button({
            
            text:'Colapsar todos.',
            cls: "my-button-name",
            handler: function(){tree.collapseAll();}
    
        })
            
        
        var tree = new Ext.tree.ColumnTree({
            width: 600,
            height: 300,
            rootVisible:false,
            autoScroll:true,
            title: '${actionName}s',
            renderTo: 'tree-div',
    
            //footerCfg: {cls: 'whatevere', html: 'Whatever'},
            
            columns:[
                {header:'Titulo',
                width:420,
                dataIndex:'title'
            },{
                header:'Remover',
                width:60,
                dataIndex:'remove',
                
            }],
    
    
            loader: new Ext.tree.TreeLoader({
                //este parametro  responsavel por ir buscar os child nodes de cada parent node quando este  expandido
                // enviado um parametro para o request com o nome node=""
                url        : '${pageContext.request.contextPath}/showOrganicaNode.do2',
                uiProviders:{
                  'col': Ext.tree.ColumnNodeUI
            }
            }
            ),
    
            //bottom bar
           bbar: new Ext.StatusBar({
                id: 'infoarea',
                //valores por defeito a usar quando os status  limpo/apagado
                defaultText: 'Para ver as sub-${actionName}s carregue no icon de expandir.',
                //defaultIconCls: 'default-icon',
                //valores de inicio
                text: 'Para ver as sub-${actionName}s carregue no icon de expandir.',
               // iconCls: 'ready-icon',
                //items: [" ", {text: 'Expandir todos.', handler: function(){tree.expandAll();},button: 'cd todos.', handler: function(){tree.expandAll();}} ]
                buttons: [
    
                       {
                           icon: "${pageContext.request.contextPath}/images/icon/icon-lixo.png",cls:"x-btn-text-icon",focus: true,
                           handler: function(){}
                       }
                        ],
     
            }),
            tbar: [ 
                    expandir,
                    colapsar
                  ],
    
                  items: [
                                  // <-- Add the action as a button
                        ],
    
    ......

  4. #14
    Ext User
    Join Date
    Nov 2009
    Posts
    1
    Vote Rating
    0
      0  

    Default the CSS solution

    If you want to solve this in the CSS you need to override the styling with left align but then also remove the center margins on the table that wraps around the buttons. It is usually set to margin:0 auto but you need to set it to margin:0

    .x-panel-btns-ct .x-panel-btns-center, .x-btn-center-nav {
    text-align:left;
    }

    .x-panel-btns-ct .x-panel-btns-center table {
    margin:0;
    }

  5. #15
    Sencha User
    Join Date
    May 2011
    Location
    Toronto
    Posts
    13
    Vote Rating
    -1
      0  

    Default

    Old thread, .. but i had the same problem ,..

    How to align text in a button?

    Here's what worked for me,..

    Code:
                   {
                        xtype: 'button',
                        text: '<table><tr><td style="text-align:left">Button 1</td></tr></table> ',
                    }
    Anyone with a more elegant solution?

  6. #16
    Sencha User
    Join Date
    Mar 2012
    Location
    China
    Posts
    13
    Vote Rating
    0
      1  

    Default

    text: '<div style="text-align:left;">tap me<div>',

  7. #17
    Sencha User
    Join Date
    Dec 2011
    Posts
    1
    Vote Rating
    0
      0  

    Default

    thank you very much

  8. #18
    Sencha User
    Join Date
    Jul 2013
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by SenchaGuru View Post
    Old thread, .. but i had the same problem ,..

    How to align text in a button?

    Here's what worked for me,..

    Code:
                   {
                        xtype: 'button',
                        text: '<table><tr><td style="text-align:left">Button 1</td></tr></table> ',
                    }
    Anyone with a more elegant solution?
    Not sure for older version, but in 4.1.1 and newer you can simply use this:

    ..
    xtype: 'button',
    textAlign:'left',
    ..

Page 2 of 2 FirstFirst 12

Posting Permissions

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