View Full Version : Ext.Button text align?

23 Apr 2007, 2:14 AM
I'm trying to create a very basic button using Ext.Button. For some reason the button text always aligns to the right (not center as expected).

This is the code:

<div id="test_button"></div>


var btn = new Ext.Button('test_button');
btn.setText('Manage Categories');

am I doing something wrong?

I wish the docs had basic examples for things like this.


23 Apr 2007, 2:16 AM
Have you tried to look at what CSS rules is applyed to the button in Firebug plugin in Firefox?

Do you have a parent node set to text-align:center or use of <center>...</center> in your code?

23 Apr 2007, 2:38 AM
Thanks for the tip KimH.

I created a very basic test using only the required code (to rule out an parent css settings).

With this new code I get the exact same problem (using FF2).

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<!-- LIBS -->
<script type="text/javascript" src="adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="adapter/yui/ext-yui-adapter.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext-all.js"></script>


<div id="apply-cat-select"></div>
var btn2 = new Ext.Button('apply-cat-select');
btn2.setText('Apply Changes');

23 Apr 2007, 2:42 AM
In fact, it looks like the problem is the most obvious - the class I selected has a 'padding-left:18px;' setting which would explain the alignment.

Sorry about asking a stupid question.

23 Apr 2007, 2:43 AM
We all have to learn from somewhere..... ;)