1. #1
    Sencha User
    Join Date
    Apr 2010
    Location
    Chennai,Tamil Nadu,India
    Posts
    72
    Vote Rating
    0
    sam.arulprakash is on a distinguished road

      0  

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

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


    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





  2. #2
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    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:

    Code:
    <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
      });
    });

  3. #3
    Sencha User
    Join Date
    Apr 2010
    Location
    Chennai,Tamil Nadu,India
    Posts
    72
    Vote Rating
    0
    sam.arulprakash is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    Sure, you can apply the CSS directly to the label by using the "style" configuration option:

    Code:
    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
      });
    });

  5. #5
    Sencha User
    Join Date
    Apr 2010
    Location
    Chennai,Tamil Nadu,India
    Posts
    72
    Vote Rating
    0
    sam.arulprakash is on a distinguished road

      0  

    Default


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

    It is working fine.

    Thanks & Regards,
    Arul Prakash.M

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    118
    Vote Rating
    4
    Sasha172 is on a distinguished road

      0  

    Default


    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

Similar Threads

  1. Two text fields with label in form panel in column layout?
    By philipp_sidarion in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 11 May 2010, 8:30 AM
  2. Form fieldlabel : button (or component) instead of text as field label
    By mailme_gx in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 14 Sep 2009, 11:20 PM
  3. Add a image and text in ext.form.label
    By Selvam packiam in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 1 Jan 2009, 11:19 PM
  4. extjs combo in regular form - alignment issue
    By bai in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 30 Mar 2008, 11:27 PM
  5. How to add simple text label onto form
    By olperv in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 12 Jul 2007, 3:46 AM

Thread Participants: 2