Double/Triple scrollbar

I’ve a text area which is used to display the exception stack trace. The problem is without scroller it is getting and with scroller it is getting triple.

Both textarea and scroller set to setSizeFull(). I tried various combinations like sizeUndefined(), setWidthFull() etc for both text area and scroller but still result is same. I set overflow:auto and again result is same. What am I missing here ?
image.png
image.png

could you post the HTML strucure as a screenshot from the browser devtools?

image.png

And the objective is to achieve something like this
image.png

here there is no parent scroller. Only the TextArea has the scroller. Also I see there is a Horizontal scrollbar which is not working for me ( with and without scroller though I set various sizes ( 100%, 300px, undefined etc )

Thanks.
There are several issues with your layout structure, e.g. you have Scroller that just contains a TextArea (which seems pointless) that is set to 100% height, but that’s 100% of the height of the dialog, which is undefined, so it doesn’t really do anything meaningful.

WIth dialogs, you always need to decide whether to set a size on the dialog itself, or if that should be determined by the contents of the dialog.

If you set a size on the dialog itself, you can do things like set something inside the dialog to be 100% of its height. But if you don’t set a size on the dialog, that 100% would be 100% of nothing which is still nothing, so it doesn’t work.


Anyhow, this is how I would structure that stuff:

For the sake of simplicity, set a fixed size on the dialog. Then build its content like this:

VerticalLayout w:100% h:100%
TextArea w:100% h:150px
HorizontalLayout w:100%
the buttons
TextArea w:100% h:100%

I set the dialog as per the above spec and this is what I’m getting
image.png

any other changes I need to make ?

parent dialog width : 768px and height is : 576px

how are you setting the dialog’s size?

if it’s through css, try setting the same size through the java API instead and see if that helps

directly seting the size on the dialog, creates like this
image.png

so, only thing missing is, horizontal scrolbar in the bottom text area

Right, unfortunately horizontal scrolling is not really supported in TextArea.

You can work around that, but it’s a bit hacky so there is no guarantee it will work without probems:

vaadin-text-area::part(input-field) {
  overflow: hidden;
}
vaadin-text-area > textarea {
  overflow: auto;
  white-space: pre;
  height: 100%;
}```

this one didn’t work as expected. The vertical bar is static and horizontal bar is visible only when you move all the way down

Seems to work fine for me.
This is on V24.3 beta

Of course, you could try using a native <textarea> instead of the vaadin component, since you’re trying to do something it doesn’t really support.

you could implement such a Flow class like this for example:

    @Tag("textarea")
    private static class NativeTextArea extends Component implements HasSize {

        public NativeTextArea() {
            getElement().setAttribute("wrap", "off");
            addClassNames(
                LumoUtility.Background.CONTRAST_10,
                LumoUtility.BorderRadius.MEDIUM,
                LumoUtility.Border.NONE,
                LumoUtility.Padding.SMALL
            );
        }

        @Synchronize("change")
        public String getValue() {
            return getElement().getProperty("value");
        }
        public void setValue(String value) {
            getElement().setProperty("value", value);
        }
    }```