PDA

View Full Version : Button with wider image and left align text



Gyerobi
24 Aug 2009, 2:59 AM
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:


style="width:270px; padding-left:100px; background-position: 10px center; text-align:left;"
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!

Animal
24 Aug 2009, 3:05 AM
Use a CSS rule to target the encapsulated <button>

Gyerobi
24 Aug 2009, 3:40 AM
Use a CSS rule to target the encapsulated <button>

I added to page:



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.

Animal
24 Aug 2009, 3:47 AM
Did you debug in Firebug to check whether that is being overridden by a more specific rule?

Gyerobi
24 Aug 2009, 5:58 AM
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:



.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

Animal
24 Aug 2009, 6:31 AM
Bad idea.

So all buttons will look that that will they?

Gyerobi
24 Aug 2009, 7:26 AM
I added these buttons on a panel and add my virtual class to the panel:



afterrender: function(p) {
p.addClass('startButtons');
}
...
.startButtons .x-btn-mc button {
...
}

Animal
24 Aug 2009, 7:35 AM
Little vignettes of random code won't tell use what you are doing.

Do you try to add a class? Why not use the cls config?

chrishallowell
24 Aug 2009, 7:43 AM
I'm trying to do the same thing (Left align the text in a button)


Here's what I have tried but the .x-btn-mc class always overwrites my custom class (xbtnmc). (See screenshot) How do I get my custom class overwritting the .x-btn-mc class?



items : [{
xtype : 'button',
text : 'Cashier Statistics',
cls : 'xbtnmc',
style : 'text-align:left;'
}


Here's my object hierarchy: viewport->accordion->button

Animal
24 Aug 2009, 7:56 AM
By making your rule more specific.

http://beta.w3.org/TR/CSS2/cascade.html#cascading-order

chrishallowell
24 Aug 2009, 9:10 AM
I tried adding the !importmant to the css class but the standard class still overwrites it.



.xbtnmc {

text-align:left !important;
}



items : [{
xtype : 'button',
text : 'Cashier Statistics',
cls : 'xbtnmc'
//style : 'text-align:left !important'
}

Animal
24 Aug 2009, 9:20 AM
It's the td.x-btn-mc element which aligns the text, so target that,

chrishallowell
24 Aug 2009, 10:20 AM
Thanks Animal for your reply. I guess I don't follow you when you say "target that element."

If I overwrite that class then all of the buttons will be left justified, which is not what I want obviously.

Can you give me another hint please?

Thanks,
Chris

Animal
24 Aug 2009, 1:37 PM
CSS selectors target specific elements.

http://www.w3.org/TR/CSS2/selector.html

It's that central TD in a Button which is styles text-align: center. You can check for yourself in Firebug.

And you can poke it in Firebug to change it live and see the result just to check for yourself that it has an effect.

So if you write a CSS rule ehich changes that, you can make it align as you like.

This is basic HTML development.

chrishallowell
25 Aug 2009, 5:56 AM
Thanks Animal for that link!


Here's my css:

div#ext-gen50 td.x-btn-mc {text-align:left !important;}


Thanks again. Much appreciative. :)