Page content getting clipped

(Hrishikesh Kokate) #1

I’m trying to create a static webpage in Hype. I generated the whole layout and checked the preview to see, a big chunk of my content in the bottom isn’t showing on the page. I’m attaching my hype document. So, if someone can tell me what is the thing that I’m doing wrong, it’ll be of great help.

Broken (65.5 KB)

Reverse the direction of breakpoints

Setting ‘Expand to fill’ for the group will ensure that the Group (the one that contains all your content) grows so that it always fills 100% of the width – this will cut off the bottom since your document is much taller than it is wide. If you instead use ‘Shrink to fit’, both the height and width of the group will be considered, so neither dimension will get cut off.

(Hrishikesh Kokate) #3

Yeah, that did solve that problem. But, I need expand to fill so that the content stretches according to browser width (since I’m trying to make it like a webpage, I need it to be available at all screen sizes, i.e. even at 1920 and beyond and I can’t keeping making layouts for all available resolutions). That’s how it looks with shrink to fit option on (image attached). You can see, the content is now towards the left (as opposed to scaling with browser width in my previous file). Can I somehow get both?

(Hans-Gerd Claßen) #4

i’d guess this’ll help (set the scene to flexible height please):

Broken (75.2 KB)

(Hrishikesh Kokate) #5

That’s just awesome, sir. Thanks a lot!!

(Hrishikesh Kokate) #6

Sorry to re-open this, but, today, I created another scene. That scene has a significantly larger height that the one you can see above. So, when a user goes to the new scene, the height of the browser doesn’t change until it’s resized at least once. As from what I understood from the code, it sets height only in the beginning when the first scene loads. Thus, even when the scene changes, it doesn’t update the height until the browser is resized and it is triggered to match the height of the new content. It stays in the height of the old content and thus, my content gets clipped again.

I tried to use another function (window.location.reload();) when the new scene kicks in and without doubt, that didn’t work because it refreshes the browser tab and I’m back on the first scene.

I think, this can be solved if I can somehow use another function to get triggered when the scenes load. This function should set the javascript you sent yesterday in the <head> of my document, so, the height will change when each scene loads. I’m just not sure how to do this.

How can I do that, or is there any other solution?

(Hans-Gerd Claßen) #7

your second scene has checked the flexible height?
if not … could you attach the document?

(Hrishikesh Kokate) #8

Yes, the flexible height option is checked.

I’m assuming you mean that if it’s checked, then I need to send the document?

Broken (1.9 MB)

(Hans-Gerd Claßen) #9

it seems onsceneload occurs sometimes after layout request so
the new height may get overwritten :slight_smile:
Broken (1.9 MB)

(Hrishikesh Kokate) #10

I’m not sure what exactly you have done. Can you please mention it? By the way, you fixed the issue again. Now, I hope, just duplicating the scenes and changing the body content will work for the height, right?

(Hans-Gerd Claßen) #11

i also added setting the doc-height onsceneload …

(Hrishikesh Kokate) #12

Oh, yeah! Thanks a lot sir!

Hype is a great app backed up by a great community.