Full screen button for dialog

can we support Full Screen button for Dialog ?

https://vaadin.com/docs/latest/components/dialog
image.png

Sure you can add it yourself in the header. It takes 3 lines of code

oh. you have sample code for it ?

var button = new Button(new Icon(“lumo”, “cross”),
(e) → dialog.setWidth(100%));

dialog.getHeader().add(button);

  • set height

Thank you. i love to have it on the dialog.
@quick-witted-echidna

oh. if i press “cross” button again to minimise back to original size. say i want back to setWidth(50%));
seem cannot do with above codes :laughing:

can i do something like:
if dialog.getWidth() < 100% dialog.setWidth(100%));
else dialog.setWidth(50%));

Do we have API dialog.getWidth() or something similar ?

It depends :sweat_smile: if you set the width/height yourself - store it beforehand and retrieve / set it again. If you are not setting it as default, just call removeWidth/height and goes theoretically back to it’s original state depending on the content

oh, we don’t have API removeWidth() :joy:

Ups my own API :grimacing: setWidth(null) then

yeah, thank thank

final:
// add Zoom full screen button to dialog var fullScreenButton = new Button(new Icon("vaadin", "expand-full"), (e) -> { if (dialog.getWidth() != null && dialog.getWidth().equals("100%")) { dialog.setSizeUndefined(); } else { dialog.setSizeFull(); } }); dialog.getHeader().add(fullScreenButton);

Button expand = new Button(VaadinIcon.EXPAND_FULL.create(), (e) → {
UI.getCurrent()
.getPage()
.retrieveExtendedClientDetails(client ->{
dialog.setWidth(client.getBodyClientWidth(),Unit.PIXELS);
dialog.setHeight(client.getBodyClientHeight(),Unit.PIXELS);
});
});