Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Show label/text on top of an image
I have a question regarding showing an image and on top of the image a label. I have tested a lot of things but it does not work. Is it possible to define a specific position (maybe with a transparent background?).
GridLayout layout = new GridLayout(1, 1);
HorizontalLayout imageLayout = new HorizontalLayout();
String basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();
FileResource resource = new FileResource(new File(basepath + "\\test.jpg"));
Image image = new Image();
layout.addComponent(imageLayout, 0, 0);
Label label = new Label("Text on top of a component");
layout.addComponent(label, 0, 0);
probably the easiest option would be to wrap the image with an AbsoluteLayout and then add the Label to that layout as well using coordinates that place it where you need it on top of the image. I don't remember exactly but it might be that you need to set some z-indexes to get the label on the top.
See https://demo.vaadin.com/book-examples/book#layout.absolutelayout.zindex for an example.
thanks for the answer, but I do not think that this work for me, because the picture in the background will be automatically resized by sizing the browser. By having a fix position the label will not automatically resized, right?
does anyone have an idee? :-)