PDA

View Full Version : Cannot set textfield background color?



IvanJ
11 Nov 2009, 10:48 AM
I want to have a "disabled"-looking text field with grey background color. I try:



{
xtype: "textfield",
width: 150,
fieldLabel: "Username",
id: "username",
readOnly: true,
value: "SampleUser123",
style: "background-color : #99FFCC;"
},


... in CSS I have:



<input type="text" name="username" id="username" autocomplete="off" size="20" class=" x-form-text x-form-field x-box-item " readonly="" style="background-color: rgb(153, 255, 204); width: 142px; left: 0px; top: 0px;"/>

So, what actually happens, is only the bottom of the textfield has about 2 pixel wide fill, but the rest remains white. Any idea how I can accomplish what I'm trying to do?

Thanks...

carol.ext
11 Nov 2009, 11:56 AM
Poke around in firebug (firefox), looks like the background-image is what is interfering with your background color.

IvanJ
11 Nov 2009, 12:23 PM
What background image? There's none...

Or do you mean I should dig around in CSS classes applied to this input?

carol.ext
11 Nov 2009, 12:57 PM
From http://getfirebug.com/css.html :


Inspect the cascade

Without Firebug, you're left scratching your head when the headlines on your page come out blue, when they should have been black. With Firebug, inspect the problem element and before you can blink you'll see the CSS that is causing the problem.

Firebug shows you the rules that cascade together to style each element. Rules are sorted in the order of precedence, and properties that have been overridden are stricken out. Each rule has a link back to the file where it came from which you can click to jump to the line.

IvanJ
11 Nov 2009, 1:09 PM
You were right - it was a background image.

Thanks to you I also figured out how the firebug "Style" panel works ;)

This was the solution, btw:



style: "background-color: #C0C0C0; background-image:none;"

Ash2009
11 Nov 2009, 1:21 PM
All Fields have a property disabled:true to do the job.

IvanJ
11 Nov 2009, 2:08 PM
doesn't disabled:true prevent the value from getting submitted?

Ash2009
11 Nov 2009, 2:55 PM
doesn't disabled:true prevent the value from getting submitted?

I didnt know that was in your requirement.To be able to submit a field which "looks" disabled.
gotcha !!