Hybrid View

  1. #1
    Ext User TheNakedPirate's Avatar
    Join Date
    Aug 2007
    Posts
    100
    Vote Rating
    0
    TheNakedPirate is on a distinguished road

      0  

    Question [Solved] How do I left align button text

    [Solved] How do I left align button text


    I have been playing around with the style elements for ages and I just can't seem to crack it

    Reason for wanting it is that I want to use buttons on my navigation menu. I want them all the same width and the text and icon left aligned.

    Personally I would have chosen to do it with regular hyperlinks but the people that care about these things want buttons.

    Code:
        var navigationButtons = Ext.get('navigation-buttons');
    
        new Ext.Button(navigationButtons, {
              text: 'People'
            , tooltip: ''
            , cls: 'x-btn-text-icon'
            , style:' ??? help ??? '
            , icon:'somecuteicon.png'
            , scope: this
            , minWidth: 175
            , handler : function()
            {
                self.location = 'siteRoot/Home/url.rails';
            }
        });
    Last edited by TheNakedPirate; 18 Sep 2007 at 9:28 PM. Reason: solved

  2. #2
    Ext User TheNakedPirate's Avatar
    Join Date
    Aug 2007
    Posts
    100
    Vote Rating
    0
    TheNakedPirate is on a distinguished road

      0  

    Default


    Actually anything sexier than hyperlinks would be a great help if the button text can't be aligned.

  3. #3
    Ext User TheNakedPirate's Avatar
    Join Date
    Aug 2007
    Posts
    100
    Vote Rating
    0
    TheNakedPirate is on a distinguished road

      0  

    Default


    No help...OK, I guess it can't be done then.

  4. #4
    Ext User TheNakedPirate's Avatar
    Join Date
    Aug 2007
    Posts
    100
    Vote Rating
    0
    TheNakedPirate is on a distinguished road

      0  

    Lightbulb


    Well after poking around in the code I came up with this

    Code:
    /**
     * @author pgiles
     * 
     * @class Lib.form.NavButton
     * @extends Ext.Button 
     * adds second class to the button template that you can override
     */
    
    Ext.namespace('Lib.form');
    
    Lib.form.NavButton = function(renderTo,config){
        Lib.form.NavButton.superclass.constructor.call(this, renderTo,config);
    };
    
    Ext.extend(Lib.form.NavButton, Ext.Button, {
        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>")
    })
    I added a new class to the template and then added this to my css

    Code:
    .x-btn-center-nav{
        text-align:left;
    }
    and I got the desired effect

  5. #5
    Ext User violinista's Avatar
    Join Date
    Apr 2007
    Location
    Serbia
    Posts
    293
    Vote Rating
    0
    violinista is on a distinguished road

      0  

    Default


    Or:

    Code:
        var navigationButtons = Ext.get('navigation-buttons');
    
        new Ext.Button(navigationButtons, {
              text: 'People'
            , tooltip: ''
            , cls: 'x-btn-text-icon'
            , style:' text-align:left'
            , icon:'somecuteicon.png'
            , scope: this
            , minWidth: 175
            , handler : function()
            {
                self.location = 'siteRoot/Home/url.rails';
            }
        });
    "It is better to be young, pretty and rich instead old, ugly and poor."
    (c) Alan Ford.

  6. #6
    Sencha User
    Join Date
    Sep 2007
    Posts
    73
    Vote Rating
    0
    hga77 is on a distinguished road

      0  

    Default


    I'm having the exact same problem. I tried violinista's method but that did'nt work.

    It should work though, I don't understand?!?!

    TheNakedPirate, can you please explain how you manage to fix this in more details please

    Thanks

  7. #7
    Ext User violinista's Avatar
    Join Date
    Apr 2007
    Location
    Serbia
    Posts
    293
    Vote Rating
    0
    violinista is on a distinguished road

      0  

    Default


    try: style:'text-align:left !important'
    "It is better to be young, pretty and rich instead old, ugly and poor."
    (c) Alan Ford.

  8. #8
    Sencha User
    Join Date
    Sep 2007
    Posts
    73
    Vote Rating
    0
    hga77 is on a distinguished road

      0  

    Default


    no that didnt work also.

    Here is a snippet of the js:

    Code:
    		init : function ()
    		{
    			tb = new Ext.Toolbar('top-nav-div');
    			tb.addButton({
    									text: 'Home Admin',
    									desc: 'home',
    									//cls: 'x-btn-text-icon scroll-bottom',
    									icon:'',
    									style:'text-align:left !important',
    									minWidth:148,
    									tooltip: '',
    									scope: this,
    									handler: menuHandler
    								});
    
    			tb = new Ext.Toolbar('middle-nav-div');
    			tb.addButton({
    									text: 'Manage Newsletters',
    									desc: 'manage_newsletters',
    									//cls: 'x-btn-text-icon scroll-bottom', 
    									icon:'',
    									style:'text-align:left !important',
    									minWidth:148,
    									tooltip: '',
    									scope: this,
    									handler: menuHandler
    								});
    
    			tb = new Ext.Toolbar('bottom-nav-div');
    			tb.addButton({
    									text: 'Add Newsletters',
    									desc: 'add_newsletter',
    									//cls: 'x-btn-text-icon scroll-bottom', 
    									icon:'',
    									style:'text-align:left !important',
    									minWidth:148,
    									tooltip: '',
    									scope: this,
    									handler: menuHandler
    								});
    ...
    ...
    ...
    And html:
    Code:
        <div id="north-div"></div>
        <div id="south-div"></div>
        <div id="east-div"></div>
        <div id="west-div">
        	<div id="nav-div">
                <div id="top-nav-div"></div>
                <div id="middle-nav-div"></div>
                <div id="bottom-nav-div"></div>
            </div>
        </div>
        <div id="center-div">
            <div id="center-tb"></div>
            <iframe id="center-iframe" frameborder="0" scrolling="auto" style="border:0px none;"></iframe>
        </div>
    the divs, "top-nav-div", "middle-nav-div" and "bottom-nav-div". Here we are adding the items...

    I'm sure this is very easy to do. Im not that experienced with ext to fix it

  9. #9
    Ext User violinista's Avatar
    Join Date
    Apr 2007
    Location
    Serbia
    Posts
    293
    Vote Rating
    0
    violinista is on a distinguished road

      0  

    Default


    Try to edit Css directly in Firebug and see what happens!
    "It is better to be young, pretty and rich instead old, ugly and poor."
    (c) Alan Ford.

  10. #10
    Ext User
    Join Date
    Nov 2009
    Posts
    1
    Vote Rating
    0
    chrishome1974 is on a distinguished road

      0  

    Default the CSS solution

    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;
    }