Replace layout with a button on mobile

Flow
1

Hello! I have some gui components that should be displayed in a layout when my app runs on pc, but when the app runs on mobile they should be put in a dialog. What I want to do is to put this layout into a dialog which will be opened when a button is clicked, when my app is used on mobile. Does anyone know how can I do this?[something similar with drawer toggle]

2

Hey Carp,

You could do something along these lines:

@Override
protected void onAttach(AttachEvent attachEvent) {
  super.onAttach(attachEvent);
  getUI().ifPresent(ui -> {
    ui.getPage().retrieveExtendedClientDetails(details -> {
      // do something based on details.getBodyClientWidth()
	  if (details.getBodyClientWidth() > SOME_THRESHOLD) {
	    add(button);
	  } else {
	    add(layout);
	  }
    }
  });
}
3

Joacim Päivärinne:
Hey Carp,

You could do something along these lines:

@Override
protected void onAttach(AttachEvent attachEvent) {
  super.onAttach(attachEvent);
  getUI().ifPresent(ui -> {
    ui.getPage().retrieveExtendedClientDetails(details -> {
      // do something based on details.getBodyClientWidth()
	  if (details.getBodyClientWidth() > SOME_THRESHOLD) {
	    add(button);
	  } else {
	    add(layout);
	  }
    }
  });
}

Thank you !!!