ComboBox Error Indicator behind components

I’m wondering why the error indicator of the ComboBox component lies behind every other component? Other component’s error indicators are on top of all components.

This happens with all kind of webbrowsers, vaadin 6.7.2
12318.png

You are using AbsoluteLayout right? Seems to be that the z-order of the components is affected of in which order you add the components. So e.g.

AbsoluteLayout layout = new AbsoluteLayout();

DateField a = new DateField();
		
b = new ComboBox();
b.setComponentError(new UserError("Error A"));
		
c = new ComboBox();
c.setComponentError(new UserError("Error B"));
		
layout.addComponent(b, "left:10px;top:200px;");
layout.addComponent(a, "left:10px;top:170px;");
layout.addComponent(c, "left:10px;top:230px;");

Causes the “b” ComboBox error indicator to be behind DateField “a”. Changing

layout.addComponent(a, "left:10px;top:170px;");
layout.addComponent(b, "left:10px;top:200px;");
layout.addComponent(c, "left:10px;top:230px;");

And they are on top of each other and not behind.

That’s right, I use the Absolute Layout and the order of adding components seems to affect the z-ordering.

I wish to have all component indicators to be on top, I thought to set the z-index of .v-errorindicator to something very high. Unfortunately it doesn’t work, do I miss something?

.v-errorindicator {
	z-index: 1000;
}

If all the error indicators have the same z-index then the stacking is done the same way if they had no z-index.
https://developer.mozilla.org/en/CSS/Understanding_z-index
.

edit: fixed link markup

I didn’t know that but it seems to be obvious. I use the visual editor to create custom components and I won’t like to change things within @AutoGenerated methods.

Vaadin doesn’t support
CSS injection
yet but Jouni Koivuviita, the CSS expert, has created an
add-on
that might fit my needs.

However, is there any other way to bring them on top?

Did you already try to change the order which the components are added to the layout in the same order as they are visually displayed.

Yes I tried it and it works. However, I’m looking for another way since I design a lot of components with the visual editor. In my opinion it’s a bit laborious to edit the @Autogenerated methods.

AbsoluteLayout itself would support z-index in the position string, but not sure if the visual editor supports it for AbsoluteLayout. I think VAbsoluteLayout always sets zIndex explicitly to the element, or resets it if not specified. To have your CSS rule for it taken into account, you might need to mark it as “!important”.

Modifying @Autogenerated methods is problematic as the visual editor may rewrite them if you edit the class again.