Responsive canvas when embeding

I have tried many things but nothing worked so far. There must be a solution somewhere on this forum if you could help to find it please?
I need to create a fully responsive HYPE canvas. Not just flexible layout, but actually the whole document to scale up/down with the window.

Currently with flexible layout I can scale width+height but I can’t embed this version and this is not exactly what I need.
I need to scale width to 100% and then the height of the HYPE container to be proportionally scaled up/down.
I have created a demo document where the image scales up but then the height of the canvas stays the same.

I can’t scale height to 100%. I need the height of the document to be adjusted proportionally so that I can see a full image when embedding to a page.
Could anyone point me to the right direction?

Responsive canvas.zip (360.6 KB)

1 Like

Thank you. I found that topic but it didn’t work. I must have done something wrong.
Should I still make the canvas scalable?
Should I just scale width?
And also, should I see the effect only if I am embedding?
Sorry for all those questions but I seriously tried that solution before and got nowhere :frowning:

xyz.hype.zip (299.2 KB)

2 Likes

Thanks. Unfortunately this is exactly what I tried and it doesn’t work when embedding on the page. It simply returns a blank canvas. I came to a conclusion that you can’t embed a HYPE document if it is set to be scalable on both width and height.
It does work as a standalone page but I need to embed it.

We need to see where you are embedding to be more specific with a response. There are so many variables that can effect how a document reacts. As you have seen, it works but not in the environment it is intended for. So, we need to see that environment.

Quite often when you see a “blank canvas” it is because the containing element does not have a height to it so when the document tries to scale to 100% it sets the height as 0px as 100% of an undeterminable height can only be 0.

I stress again though, without having something to see we can only speculate.

1 Like

Thank you! You were right, it didn’t pick up the height!
All is working now

1 Like

setting a fixed height to a parent element when embedding will not solve your problem as you requested a proportionally scale (w/h) depending on the width that is avaiable. the provided script sets a absolute height on HypeLayoutRequest (which includes firing onresize) so it'll never be a 0px-height on an responsive document.

////////////////////////////

@DBear is right, without any example of what you are doing it's hard to help. it's always a guessing ... in this case i'd say that you missed including the script when embedding ...

/////////////////////

in your last post you're telling us, that you solved your problem. well nice to know. But please keep in mind that this is a forum which aim it is to provide help. Not only to the concrete request, but also for people visiting your post when searching to solve there own problem ... they won't get far here. so please consider to state out a solution when your equest was solved.

///////////////////////////////////

another nice hack and simple solution for scaling your full responsive hypedocument proportionally on embed:

<div style="position: relative;  width: 100%;  height: 0;  padding-bottom: 130%; overflow: hidden;">

<--your hypedocument-->;
   
</div> 

whereas the padding-bottom should be scenewidth/sceneheight*100

sunny day :slight_smile:

4 Likes

Oh Hans, dat hack! :kissing_heart::kissing_heart:
You’re a lifesaver!:heart_eyes:
Thank you!

1 Like