PDA

View Full Version : ExtJs.Form.Label (text-Alignment) not working



sam.arulprakash
3 Jun 2010, 4:06 AM
Hi all,


I am not able to align Label text to the right.
(In HTML style we have text-align).Like this in Ext Js which property i have to add?...

I have tried LabelStyle it is not working.And also tried with CSS it is also not working.
Please review my code and help me.


<style>
.test-lbl-text-align
{font-weight:bold;color:red;text-align:right;}
</style>
Ext.onReady(function()
{
var <%=this.ID%> = new Ext.form.Label(
{
cls: 'test-lbl-text-align',
text: 'test',
labelStyle: 'text-align:right;border:solid 1px black;',

width:'200',
height:'200',
renderTo: document.body
});
});


Thanks in advance.

Regards,
Arul Prakash.M

jarrednicholls
3 Jun 2010, 5:57 AM
A label by default is an inline element, and thus giving it a specific width/height isn't going to have an effect. You can set its display to 'block', and then it should work for you:



<style>
.test-lbl-text-align
{font-weight:bold;color:red;text-align:right;display:block;width:200px;height:200px;}
</style>
Ext.onReady(function(){
var <%=this.ID%> = new Ext.form.Label({
cls: 'test-lbl-text-align',
text: 'test',
renderTo: document.body
});
});

sam.arulprakash
3 Jun 2010, 6:39 AM
Thanks you very much nicolls.

Your code working fine for me.

With out using CssClass is there any way to acheive text-align?.......

Thanks in advance.

Regards,
Arul Prakash.M

jarrednicholls
3 Jun 2010, 7:40 AM
Sure, you can apply the CSS directly to the label by using the "style" configuration option:



Ext.onReady(function(){
var <%=this.ID%> = new Ext.form.Label({
style: 'font-weight:bold;color:red;text-align:right;display:block;width:200px;height:200px;',
text: 'test',
renderTo: document.body
});
});

sam.arulprakash
3 Jun 2010, 7:57 AM
Thank u so much nicholls...for your quick reply.

It is working fine.

Thanks & Regards,
Arul Prakash.M

Sasha172
14 May 2012, 9:29 PM
I have a simpler method. Whenever I add in the label I do the following :--

label : '<p style="text-align: center;">My Label</p>'

replace the word center with right, left, etc :D