I've a displayfield, and i would like to increase the font size. I've configured it as follow:

{
  xtype:'displayfield',
  cls:'biggertext',
  fieldLabel:'label',
  style:{
         'font-size':'32px'
        },
  labelStyle:{
                'font-size':'32px'
             }
}

but the size of the font for the label and the value field has not changed.

I've also tried to do it via CSS:

.biggertext
{
    font-size: 32px;
} 

but I've no changes about the font size.

What is wrong?

Thank you all

I've a displayfield, and i would like to increase the font size. I've configured it as follow:

{
  xtype:'displayfield',
  cls:'biggertext',
  fieldLabel:'label',
  style:{
         'font-size':'32px'
        },
  labelStyle:{
                'font-size':'32px'
             }
}

but the size of the font for the label and the value field has not changed.

I've also tried to do it via CSS:

.biggertext
{
    font-size: 32px;
} 

but I've no changes about the font size.

What is wrong?

Thank you all

• javascript
• css
• extjs
• extjs4
• stylesheet

• What is the framework you are working? – Sajitha Rathnayake Commented Apr 1, 2014 at 7:49
• the framework is Extjs 4.1.1 – Marco Commented Apr 1, 2014 at 8:14

5 Answers 5

you should use some other properties for this. e.g labelcls.

Here is a demo

{
        xtype: 'displayfield',
        fieldLabel: 'Home',
        name: 'home_score',
        value: '10',
        labelCls: 'biggertext',
        fieldCls:'biggertext',
    }

Try this.!important will overwrite the parent style

.biggertext
{
    font-size: 32px!important;
}

Or

 style:{
         'font-size':'32px!important'
        },
  labelStyle:{
                'font-size':'32px!important'
             }

label:

labelStyle: "font-size:15px;font-weight:bold;width:60;padding:10px 0px 0px 10px;",

value:

style:"font-size:14px;padding:10px 0px 0 15px",

You've missed the ' on your cls biggertext in the ExtJS code. Also you do your styles like this:

style:{
        'font-size: 32px;'
       },
labelStyle:{
        'font-size:32px;'
      }

Also note that labelStyle used to work only if you are wrapping your label in a container with FormLayout.

It could also be that you need to add !important to your CSS. I once needed it, otherwise it would not be displayed correctly in the browser.

labelStyle: 'font-size:16px'

labelStyle prop is of type string, not object. the existing answers are passing an object to the prop, so that didn't work.

hopefully this helps someone unlucky to be still working with extjs.