ExtJs.Form.Label (text-Alignment) not working

[sam.arulprakash]

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;borderolid 1px black;',

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


Thanks in advance.

Regards,
Arul Prakash.M

[jarrednicholls]

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]

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]

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]

Thank u so much nicholls...for your quick reply.

It is working fine.

Thanks & Regards,
Arul Prakash.M

[Sasha172]

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