CODEWITHSUNDEEP
cssextjsextjs4extjs4.2
Razgriz
Razgriz

Reputation: 7343

Rounded corner for textfield not working in ExtJS

I have a textfield defined below as such:

xtype: 'textfield',
x: 490,
y: 365,
cls: 'textarea',
height: 40,
width: 300,
fieldLabel: 'Label',
hideEmptyLabel: false,
hideLabel: true

And my CSS is defined as such:

.textarea {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

However, the textfield still has corners. I think I'm doing something wrong and I can't spot it out.

Upvotes: 2

Views: 1158

Answers (2)

Chetan
Chetan

Reputation: 2756

Try this:-

.textarea .x-form-text {
   border-radius: 5px;
}

You need to provide border radius property to the <input> element, but you were trying to set it to component element which contains the <input> element.

enter image description here

Upvotes: 5

xGeo
xGeo

Reputation: 2139

you can also try fieldStyle:

{
    xtype: 'textfield',
    x: 490,
    y: 365,
    cls: 'textarea',
    height: 40,
    width: 300,
    fieldLabel: 'Label',
    hideEmptyLabel: false,
    hideLabel: true,
    fieldStyle: {
        borderRadius: 5 //here
    }
}

of course, this will only apply to the component you created. but if you want to make this affect all fields with textarea cls, try using fieldCls instead.

Upvotes: 0

Related Questions