Results 1 to 6 of 6

Thread: altering text alignment on buttons

  1. #1
    Sencha User gskluzacek's Avatar
    Join Date
    Feb 2010
    Location
    Algonquin, IL
    Posts
    63

    Default altering text alignment on buttons

    Thought this would be simple, but it turns out I can't figure this one out... probably doesn't help that my knowledge of CSS is limited.

    I have a button and instead of having the text centered, I'd like it left or right justified.

    I've checked the API and there is no textAlign: config item for a button, and I've also tried using the style: config item to set the text alignment on the button but it doesn't work.
    Code:
    style: {'text-align': 'left', color: '#E00'},
    It appears another a css rule is overriding the style: config item.

    Looking at the html/style in firebug, the style: config item that I am supplying is getting applied to the table element that is the root container for the button, but if I look at the button element itself the text-align attribute is coming from the .x-btn-mc rule applied to the containing td element.

    so how can I provide the text-align value that I want just for this one button?

    Thanks for your help in advanced.
    -- Greg

  2. #2
    Ext User d4rk knight's Avatar
    Join Date
    Dec 2008
    Location
    Oaxaca, M
    Posts
    12

    Default

    I've the same problem... did you solved it?. thanks

  3. #3
    Sencha User gskluzacek's Avatar
    Join Date
    Feb 2010
    Location
    Algonquin, IL
    Posts
    63

    Default

    Quote Originally Posted by d4rk knight View Post
    I've the same problem... did you solved it?. thanks
    Can't remember it was so long ago... I will have to try and remember where I was trying to do that and take a look at the code, but problems is I'm not sure I kept the code either

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    The style has to be applied to the inner <button> element instead of the outer <table>.

    The easiest way to do this is by giving the button a cls (e.g. cls:'my-cls') and use this class in a css rule:
    Code:
    .my-cls button {text-align: left; color: #e00;}

  5. #5
    Ext User d4rk knight's Avatar
    Join Date
    Dec 2008
    Location
    Oaxaca, M
    Posts
    12

    Default

    Thanks Condor. Using the cls attribute works great.
    gskluzacek thanks too.

  6. #6

    Default

    I know this is a old thread but the answer wasn't helped me.


    With this css the button text will align left even inside a window.

    Extjs Usage
    Code:
    {
        xtype: 'button',
        text: 'left align text',
        cls: "x-btn-left"
    }
    Css code:
    Code:
    .x-btn-left .x-btn-mc, .x-btn-left button {
        text-align: left;
    }

Posting Permissions

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