CODEWITHSUNDEEP
androidcsshtmlextjssencha-touch
Konza
Konza

Reputation: 2173

How to change the default style of sencha touch input textfield?

I want to change the way how the input textfield looks in Sencha touch. I want the text field to look like the one shown below

Textfield with different style

I tried changing the css to 

background-color: rgba(0,0,0,0.0);

So that the background is transparent.I also tried adjusting the borders but it didn't work for me.

Please help me with this.

Upvotes: 0

Views: 1949

Answers (4)

Yash Vekaria
Yash Vekaria

Reputation: 2373

1> view file 

                               {
                                    xtype: 'textfield',
                                    name: 'email',
                                    clearIcon: false,
                                    itemId: 'name',
                                    ui: 'plain',
                                    inputCls: 'login-textfield',                                        
                                    placeHolder: 'Email'
                                }

2> .css file

.login-textfield {
    background-color: #fff !important;
    color: #5d5d56 !important;
}

3> to be more precise white color background to you parent panel (xtype: 'fieldset) by using style or cls config.

Upvotes: 2

Amar1989
Amar1989

Reputation: 512

Use sencha mountainView theme for android and then make change background color. it will work.

Upvotes: 0

Dinkheller
Dinkheller

Reputation: 5054

1) goto Sencha docs

2) enter "textfield" in the top right search field

3) in the header bar hover over "CSS Vars"

.

As you can see there are quite some $Vars you can use to easily style the text input fields. Still to make the input fields look like, what you want, you will need a bit more CSS.

.

4) use inputCls as mentioned by Naresh Tank, but for now avoid baseCls (Naresh is more experienced and therefore, whats easy for him, might be not for you here).

Happy styling. Everything else is not Sencha Touch, but pure CSS.

Upvotes: 0

Naresh Tank
Naresh Tank

Reputation: 1568

As per your requirement you have to create css classes and give it to as baseCls and inputCls theses the config of textfied.

Upvotes: 1

Related Questions