Does anyone have any insight into how WASM is buil...

# compose-web

[John Smith]

Does anyone have any insight into how WASM is building out the canvas (height and width). I know it is based on the parent element but I am having trouble getting it to go to the full size of available space without needing to resize the browser multiple times. I am trying to add in KMP WASM output into a pre-existing HTML page. I am trying to follow all of the guides but every example and guide seems to utilize the body directly. I have to be in a subelement of body (creating a div as the root where I want to insert WASM). It is showing the UI correctly but the base dev element does not go to the full size of the content window I want. Not sure if its a HTML issue or something with how the canvas is dynamically resized? I have already tried a few different methods in CSS and HTML on the root container div (style="height: 100%; width: 100%") but nothing has worked. Any help is appreciated. Thank you

[Oliver.O]

If you're using the entire browser viewport, you might want to look into CanvasBasedWindow, in particular its requestResize and applyDefaultStyles parameters. Also, see the DefaultWindowState size change listener if you don't supply your own.

Does that help?

[John Smith]

Not trying to use the whole viewport right now just use an existing space in HTML to put it in. I think I am going to build out a JS on load listener to dynamically change the size

[Oliver.O]

So which @Composable function do you use to fill your canvas element?

[John Smith]

Currently using ComposeViewport

[Oliver.O]

According to its documentation, it should adjust its size with its container. It uses DefaultWindowState to do so. If that doesn't work correctly, maybe you'd file an issue on YouTrack with a reproducer?

[John Smith]

Thank you

[Thierry Kh]

Hello. @John Smith did you manage to load a wasm app into css defined div?
I've been trying for so many hours without success. My app takes the whole browser's page size.

[John Smith]

@Thierry Kh I was able to get it to load the view but it did not use the correct size so I have to resize it dynamically. It is not perfect but worked enough to continue on. I need to look at it again to see if I can try a different route that would not need so much customization to work

[Thierry Kh]

@John Smith could you share the bit of code that resizes it dynamically please ? Even if it's kind of a workaround.

[John Smith]

@Thierry Kh sorry I misspoke. Did this too long ago and forgot the implementation I was able to get working. It is far less sexy. I made the dig act like it had the full window size (only way it would show the UI without a page refresh) and then set the width and the height to constrain the layout to the viewable space in the window. It’s NOT dynamic like I thought. It looks okay but a little weird. I am going to be getting back into that section of code soon hopefully to reattack on it so hopefully compose has gotten better in the last couple versions and this problem will be fixed when I get back to it

[Thierry Kh]

@John Smith no worries. I found a workaround. I still need to check today if it's really dynamic but using ComposeViewport instead of CanvasBasedWindow allows me to size the app as I define it in the html/css.

(I will open a thread later about CanvasBasedWindow with an example to discuss about requestResize that is not working for me and some others.)

[John Smith]

Nice! I had to switch between those two as well to find one that would work at the moment I was doing it. I even put up a ticket on YouTrack but it never went anywhere last I checked. You would think @jetbrains would want to fix it since it seems like a pretty critical bug

[Oliver.O]

Could you supply the YouTrack ticket number?

[John Smith]

CMP-6999 ComposeViewport not showing up on first load, needs window resize to trigger draw

[Oliver.O]

I've been working on CanvasBasedWindow before and I'm willing to look into the issue as soon as we have a self-contained reproducer. Hopefully it's easy to fix and in that case, I'll come up with a PR.