CODEWITHSUNDEEP
javascriptcssextjsextjs4stylesheet
Marco
Marco

Reputation: 1334

Extjs change font size for displayfield

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

Upvotes: 2

Views: 26995

Answers (5)

haku
haku

Reputation: 4505

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.

Upvotes: 0

Steven
Steven

Reputation: 21

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",

Upvotes: 2

UmarKashmiri
UmarKashmiri

Reputation: 872

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',
    }

Upvotes: 5

Sajitha Rathnayake
Sajitha Rathnayake

Reputation: 1728

Try this.!important will overwrite the parent style

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

Or

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

Upvotes: 2

Meliz
Meliz

Reputation: 31

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.

Upvotes: 1

Related Questions