Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

ComboBox Error Indicator behind components

Andreas Buechler
9 years ago May 01, 2012 5:47pm

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

Last updated on May, 1st 2012
Johannes Häyry
9 years ago May 10, 2012 10:39am

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.

+1
Andreas Buechler
9 years ago May 12, 2012 2:29pm

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;
}
Last updated on May, 12th 2012
Johannes Häyry
9 years ago May 14, 2012 7:51am

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

Last updated on May, 15th 2012
Andreas Buechler
9 years ago May 15, 2012 7:02am

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?

Last updated on May, 15th 2012
Johannes Häyry
9 years ago May 15, 2012 7:44am

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.

Andreas Buechler
9 years ago May 26, 2012 2:51pm

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.

Henri Sara
9 years ago May 30, 2012 10:30am

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.