PDA

View Full Version : setting padding of x-btn-center class



rahulmca1@gmail.com
6 Sep 2007, 11:40 PM
Hi,

I am using ext button.
How can I set padding of x-btn-center class for goBtn button to zero.

Generated html is



<div id="goBtn">
<table id="ext-gen285" class="x-btn-wrap x-btn" cellspacing="0" cellpadding="0" border="0" style="width: auto;">
<tbody>
<tr>
<td class="x-btn-left">
</td>
<td class="x-btn-center">
<em unselectable="on">
<button id="ext-gen286" class="x-btn-text" type="button">Los</button>
</em>
</td>
<td class="x-btn-right">
</td>
</tr>
</tbody>
</table>
</div>



It is this
<td class="x-btn-center"> which holds text and has padding.
I donot want to modify ext.css as class x-btn-center is used by other buttons.




<td class="x-btn-center">
<em unselectable="on">
<button id="ext-gen286" class="x-btn-text" type="button">Los</button>
</em>
</td>




.x-btn-center {ext-all.css
background:transparent url(../images/default/basic-dialog/btn-sprite.gif) repeat-x scroll 0pt -42px;
cursor:pointer;

padding:0pt 5px; //How to set padding of this class to 0 for only this button

text-align:center;
vertical-align:middle;
white-space:nowrap;
}


Thanks

devnull
7 Sep 2007, 9:02 AM
I believe you can feed the constructor a "style" param in its config object:


new Ext.button({
text: "myButton",
style: "padding:0pt 5px;"
})

or however you are calling it.

Grimsk
7 Sep 2007, 10:29 AM
cls: yourCssClass
work fine too