PDA

View Full Version : Ext.Button text align?



benny
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>

And:

var btn = new Ext.Button('test_button');
btn.getEl().addClass('x-btn-text-icon');
btn.setText('Manage Categories');

am I doing something wrong?

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

Thanks

KimH
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?

benny
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).


<html>
<head>
<title>Test</title>
<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>

</head>
<body>

<div id="apply-cat-select"></div>
<script>
var btn2 = new Ext.Button('apply-cat-select');
btn2.getEl().addClass('x-btn-text-icon');
btn2.setText('Apply Changes');
</script>
</body>
</html>

benny
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.

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