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
    Vote Rating
    3
      0  

    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
    Vote Rating
    0
      0  

    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
    Vote Rating
    3
      0  

    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,246
    Vote Rating
    133
      0  

    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
    Vote Rating
    0
      0  

    Default

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

  6. #6
    Sencha User
    Join Date
    Apr 2014
    Posts
    2
    Vote Rating
    0
      0  

    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
  •