Results 1 to 10 of 15

Thread: Button with wider image and left align text

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Dec 2008
    Posts
    11

    Default Button with wider image and left align text

    Hi!

    First sorry for my poor english. So I want to use 80px width picture on the left side and after the picture some text. It's neat if I added style attributum to button element in firbeug with these values:

    Code:
    style="width:270px; padding-left:100px; background-position: 10px center; text-align:left;"
    Code:
    var btn = new Ext.Button({
            width: 270,
            scale: 'large',
            enableToggle: true,
            iconAlign: 'left',
            text: 'Text on button with left align',
            iconCls: 'starsimage',
            renderTo: 'btndiv'        
        });
    But it's not working when I set the Button cls with these values, because the cls class refer to table - table which include the button element. I tried write some css class to table but it wasn't succesful and I can't reach the button element. What is the solution? Thanks!
    Attached Images Attached Images

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Use a CSS rule to target the encapsulated <button>

  3. #3
    Sencha User
    Join Date
    Dec 2008
    Posts
    11

    Default

    Quote Originally Posted by Animal View Post
    Use a CSS rule to target the encapsulated <button>
    I added to page:

    Code:
    button {
        width:270px;
        text-align:left;
        height:38px;
        padding-left:100px;
    }
    It was good on a simple button element but the Ext.Button wasn't change.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Did you debug in Firebug to check whether that is being overridden by a more specific rule?

  5. #5
    Sencha User
    Join Date
    Dec 2008
    Posts
    11

    Default

    Quote Originally Posted by Animal View Post
    Did you debug in Firebug to check whether that is being overridden by a more specific rule?
    I skiped the class, so this code is working:

    Code:
    .x-btn-mc button {
        width:100%;
        height:100%;    
        text-align:left;
        padding-left:100px;    
        background-repeat:no-repeat;
        background-position: 10px center;      
        background-image: url(stars.png) !important;
    }
    Thanks

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Bad idea.

    So all buttons will look that that will they?

Posting Permissions

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