CODEWITHSUNDEEP
vaadin
Alexander Larin
Alexander Larin

Reputation: 75

Vaadin Dialog resize programmatically

Vaadin 14.2.0.alpha7 added new functionality to Dialog component (https://vaadin.com/api/platform/14.2.0.alpha7/com/vaadin/flow/component/dialog/Dialog.html), especially the resizing availability. Unfortunately I was unable to find a way to have dialog being created with width I need neither to set the width programmatically after the dialog is opened.

Here are few lines of code I use for described purposes (unsuccessfully):

    dialog.isResizable = true

    dialog.width = "900px"


    dialog.addOpenedChangeListener { event ->

        println("!!!opened-changed event fired")

        dialog.width = "900px"

        println("!!!dialog width = ${dialog.width}")
    }

    dialog.addResizeListener { event ->

        println("!!! on resize event width = ${dialog.width}")
    }

When I open the dialog it appears with its limited width (around 500px), the OpenedChanged event being fired and prints that dialog has 900px width (while its not!), when I resize it manually the Resize event being fired and prints that dialog has around 600px width (after I increased it a bit manually using mouse).

I know that early versions of Dialog had limited width (around 500px) in templates and there is workaround with importing styles to adjust dialog width. I was hoping with new version to increase dialog width without touching templates and client-side.

Is there any way to set dialog width and adjust on being opened programmatically without touching client-side templates?

P.S. The 14.2.0 version announced to be published on April so I believe the question is suitable even for now its prerelease version.

Upvotes: 0

Views: 913

Answers (1)

anasmi
anasmi

Reputation: 2652

This happens due to the max-width setting of ~560px to comply with the materials design. There is a ticket about it here: Dialog Size - Material Theme. (In the default Lumo theme this works out of the box. You can verify it by commenting out @Theme(value = Material::class, variant = Material.LIGHT) in MainLayout.kt)

Unfortunately, as style targets the overlay part, the only one way to overcome this is using style files. On the other hand, it should be pretty straightforward in the current version :)

I created a pull request to your repo with the changes needed. Feel free to use it, if you want Make width acccept values more than 500px :)

Upvotes: 1

Related Questions