Hi everybody,
I’d like to customize disabled TextFields style for looking like normal enabled TextFields, to do that I tried the following:
This made them like enabled ones except the content color, which still looks gray not black.
If you know how, please help
If your text field is in a form, you can get the property object and set it to read-only. Then the text field won’t be editable and will look just like the editable ones (same color).
BeanItem<MyObject> beanItem = new BeanItem<MyObject>(objectInstance);
beanItem.getItemProperty("objectField").setReadOnly(true);
myForm.setItemDataSource(beanItem);
Cheers,
Bobby
Thank you for your answer Bobby.
My TextFields are not on a form. I tried to set them readonly, instead of disabling them, but readonly TextFields are painted without borders they look like labels… this is because I’m trying to make them disabled instead of readonly…
Anybody knows how to make a TextField non editable and with borders looking as a normal TextField?
Please help me!
Is it possible to have non-editable TextFields with borders? Readonly TextFields have no border, and disabled TextFields have a different style which I was unable to fully customize for making it like normal TextFields as explained before on previous post…
resolved your problem for me. But every item then would be, when it is disabled, visible like all other items. I didn’t try to set ID or Class for this element. (Didn’t want to change my running application - have try it with FF13 and Firebux.) I think that your code didn’t work because you don’t use !important and vaadin just overwrite your css.
I´m using this with Runo-theme.
Add style name to the field:
TextField field = new TextField();
field.addStyleName("visible");
…and make some css modifications:
.v-textfield-visible.v-readonly,
.v-textfield-visible.v-disabled{
border: 1px solid #b6b6b6;
border-top-color: #9d9d9d;
border-bottom-color: #d6d6d6;
border-right-color: #d6d6d6;
color: #464f52;
opacity: 1.0;
}
Thank you Lauri for your answer.
I tried your code, and it sets readonly TextFields appearance like normal ones, but now I get
com.vaadin.data.Property$ReadOnlyException
when assigning values to them…
Instead if I try it on disabled TextFields they are still looking as disabled ones…
Hi,
Glad to be of help.
I think you need to set the
field.setReadOnly(false); before setting the new value. You can then set the textfield back to readonly.
Christian, I tried your suggestion but it did not work for me…
To be clear here is the code:
Hi,
thanks for your help 
Is it possible to customize disabled ones instead of readonly ones? It would be better because I’ll avoid to set for each field setReadOnly(false) and again setReadOnly(true), for every value change…
Thank you for your support guys!
Here is the working code for customizing TextField style for both disabled and readonly components:
I noticed that on the IE browser TextFields with these customized styles have gray content color, therefore as it were disabled… 
Is there any way to make it work on IE too?
Please help!
How could I make customized TextFields CSS work on IE too?
Please help!
Most likely there is still some more specific rule for IE that overrides your rule (see e.g.
this page
). That rule only applies to IE (e.g. has .v-ie or .v-ie8 or something like that as one of its selector parts) so that is why you are seeing the problem on IE.
Use the developer tools of IE to find out more about the CSS rules that apply or search for related rules in the theme you are using and then make a more specific rule following the same pattern.
Thanks Henri for your answer.
I tried adding this CSS rules specific for IE, but without success:
.v-ie .v-textfield-visible {
border: 1px solid #b6b6b6;
border-top-color: #9d9d9d;
border-bottom-color: #d6d6d6;
border-right-color: #d6d6d6;
opacity: 1.0;
filter: none;
}
and this:
.v-ie8 .v-textfield-visible {
border: 1px solid #b6b6b6;
border-top-color: #9d9d9d;
border-bottom-color: #d6d6d6;
border-right-color: #d6d6d6;
opacity: 1.0;
filter: none;
}
Is “visibile” your own style name or should it be “.v-textfield-visible” instead of “.v-textfield-visibile”? Or is this just a typo in the forum post?
Anyway, the key is usually checking with the developer tools what actually applies in the browser, where does each property come from and what overrides what. Firebug for Firefox and the tools included in Chrome are quite good for this, I don’t have much experience with the related tools for older IEs but they might help as well.
“visibile” is my own style, however in this forum post I named it “visible”, so the correct reference is
“.v-textfield-visible”
I tried using IE Developer tools, and it seems that “.v-ie .v-textfield-visible” and “.v-ie8 .v-textfield-visible” do nothing more than “.v-textfield-visible”.
I tried also to put them all on CSS:
//Java
myTextField = new TextField();
myTextField.setEnabled(false);
myTextField.addStyleName("visible");
//CSS
.v-caption-visible {
opacity: 1.0;
filter: none;
}
.v-textfield-visible {
border: 1px solid #b6b6b6;
border-top-color: #9d9d9d;
border-bottom-color: #d6d6d6;
border-right-color: #d6d6d6;
opacity: 1.0;
filter: none;
}
.v-ie .v-textfield-visible {
border: 1px solid #b6b6b6;
border-top-color: #9d9d9d;
border-bottom-color: #d6d6d6;
border-right-color: #d6d6d6;
opacity: 1.0;
filter: none;
}
.v-ie8 .v-textfield-visible {
border: 1px solid #b6b6b6;
border-top-color: #9d9d9d;
border-bottom-color: #d6d6d6;
border-right-color: #d6d6d6;
opacity: 1.0;
filter: none;
}
I did not find any way to solve this for IE…
Please help!
I tried using IE developer tools, but I did not find any way to solve it… disabled textfields are never displayed as normal ones, there’s something different, it seems that the filter CSS property is not completely removed…
Please help!