When screen resolution stretches viewport, theme overrides.

Hello all, I have an application that takes up a full screen, but when adding items to it (images, which are displayed as a preview) one of my VerticalLayouts can stretch to take up more real estate than a single screen height. When the screen dimensions push past the edge of the screen, the new area is filled with white, rather than my theme colors (Lumo.DARK)

My implementation of the theme is:

    ThemeList tl = UI.getCurrent().getElement().getThemeList();
    tl.add(Lumo.DARK);

Images are added to a vertical layout via:

 upload.addSucceededListener(event -> {
            String fileName = event.getFileName();
            InputStream fileData = buffer.getInputStream(fileName);
            int randFile = random.nextInt();
            File f = null;
            try {
                f = File.createTempFile("setimg-" + randFile, ".jpg");
            }catch (IOException IE) {IE.printStackTrace();}
            Image img = new Image(new StreamResource(f.getName(), () ->{
                try{
                    int rand = random.nextInt();
                    File imageFile = File.createTempFile("setimg-" + rand, ".jpg");
                    FileUtils.copyInputStreamToFile(fileData, imageFile);
                    setImages.add(imageFile);
                    return new FileInputStream(imageFile);
                } catch (IOException fnf){fnf.printStackTrace();}
                return null;
            }), "alt text");
            img.setWidth("250px");
            img.setHeight("400px");
            setHolder.add(img); //Image Gets Appended here
        });

I think it’s related to the fact that you are adding the theme to the body instead of the html tag. You can check if it helps to apply it to the html tag in the browser instead

sounds like there may be issues with how the UIs layout is constructed too. Code snippet or DOM screenshot would help.

The full code of my snippet is as follows:

var main = new HorizontalLayout();
        main.setPadding(false);
        main.setMargin(false);
        main.setSizeFull();
            //Some spacers between our columns
            var space1 = new VerticalLayout();
            space1.setWidth("100px");
            var space2 = new VerticalLayout();
            space2.setWidth("100px");
            var space3 = new VerticalLayout();
            space3.setWidth("100px");
            main.add(space1);
            add(main);
            //Fields / text areas / buttons
            var leftPane = new LeftPane();
            var leftPanel = leftPane.getLeftPane(setHolder, teaserHolder, csvUsersText, programLogs,
                subscriptionUsers, users, progressBar, progressBarLabel);
            var middlePane = MiddlePane.getMiddlePane(csvUsersText, subscriptionUsers,imageHolder,setHolder);
            var rightPane = RightPane.getRightPane(programLogs);
            main.add(leftPanel, space2, middlePane, space3, rightPane);
            /*
            ThemeList tl = UI.getCurrent().getElement().getThemeList();
            tl.add(Lumo.DARK);
            */

The pane that’s being added to is “middlePane”

( note, those last 2 lines are generally uncommented )

Thanks. I see that you’re not setting height:100% on anything, so none of these elements (except main) know that they’re supposed to fill the viewport. Instead, they’re just scaling to fit their contents, overflowing main. (I don’t know what is outside of main, but they’re probably overflow that too, whatever it is, even if it’s just <body>)

(btw using VerticalLayouts as spacers is really overkill. There’s a setSpacing(true) method you can apply to main, or, if that spacing is not to your liking, you can do .getThemeList().add("spacing-s") or -xs or -xl or whatever)

if you specifically do want vertical scrolling on a particular part of the UI, you can use a Scroller for that

@useful-whale – I’ve not seen anything in the documentation that suggests how to set height of a single layout component to 100%, and the documentation around implementing CSS is really confusing for me (I feel like the documentation around it needs to be slightly more demonstrative w/r/t a fully functional snippet / MVP of setting up a custom theme)

And just to add in a visual
unknown.jpg

we’re not talking css here though – we’re talking Flow’s Java API. All components have a setHeight() method

Are you suggesting main.setHeight(“100%”);? I was unaware that percentages worked, I thought only \d+px values worked

they do, there’s also setWidthFull and setHeightFull for convenience

main.setHeight(“100%”) doesn’t resolve the issue.
main.setMinHeight(“5000px”) stops applying the theme at the bottom of the default viewport

I was not talking about main itself, but the stuff you put inside main

you already have main.setSizeFull();

you can also try min height “100vh” instead of a defined height in px

good point

one thing that always helps us troubleshoot layout issues is to show the entire html structure with the browser’s Inspect Element, like this
unknown.jpg