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);
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?
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 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…
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…
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.
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 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…