Can you set Page height based on the symbol height?

Tips & Tricks
1

Hey Folks!

I have already checked this below page out with key input by @h_classen and @MaxZieb, but I am not sure this solves the problem I have.

https://forums.tumult.com/t/creating-a-flexible-tumult-hype-document-within-a-div-with-no-set-height/13224/49

I am looking for a way to adjust the page height based on the height of a Symbol. Key point is that the symbol scale percentage changes based on layout (e.g. 60% for iPad, 30% for mobile etc.)

My problem is that there is often a lot of empty space at the bottom of the page (after Content 2 in the file) as the Symbol shrinks itself to the size of the screen.

Is there any way to get the page height to be set based on the Symbol height (after adjusting for scaling)?

Thanks so much for your help in advance!

Page height based on Symbol height.hype.zip (23.7 KB)

2
1 Like
3

Does that answer your question? It looks like you would set a class name of 'dimensions' to the element you wish to set the boundaries of your Hype document.

4

I think we are getting closer because the code is definitely adjusting the page height!

However, it is not operating in a predictable way -- probably because of some errors in my implementation? I have not changed the code and am simply giving the Symbol the class "dimensions".

  1. The primary page I am working on is 768*1300. Even though the Symbol dimension extends to the blue rectangle, when I publish it, the page stops at the red rectangle. Why?

image
image1920×951 92.1 KB

  1. If I did get it to work in my primary layout, what adjustments, would I need to make for the other layouts, which are at different scales?

HypeStageResizer - layouts and scales.hype.zip (46.0 KB)

6

looking at your document it seems you'd like to resize the doc based on a proportional approach scaling a symbol across layouts.

it's always the same symbol, so it won't need multiple layouts ...
HypeStageResizer - layouts and scales 3.hype.zip (20,5 KB)

3 Likes
7

It is perfect!!!

2 Likes
8

When I create a duplicate page from Page 1, there is weird behavior!

When I publish Page 2, it does not scroll. However, if I resize Page 2 in the browser using my cursor, then the page scrolls.

This feels like a very minor bug related to Page Sizing or something? Any suggestions on how I might fix this? Here is the file with Page 1 and 2.

HypeStageResizer - layouts and scales 3 2.hype.zip (28.5 KB)

9

there is no behavior to switch from scene 1 to the second scene. so, how do you get there? can you please describe more precise ...

10

It seems the problem of not scrolling is only when I publish the page using

"Preview Current Scene in Browser".

In my Chrome Browser, I cannot scroll either Page 1 or Page 2 when I publish it as above.

image

11

I can easily reproduce the problem, but glancing at the code it is unclear why this would be the case. I'll need to investigate further.

A change that is a workaround for me is to add On Scene Load actions for your scenes that Run JavaScript… with:

window.setTimeout(function () {
	hypeDocument.relayoutIfNecessary();
}, 0);

However since I'm not certain yet on the problem it isn't 100% clear if there are cases where this might not work.

1 Like
12

Note the issue is not restricted to the copy but also on page one if you use the Preview Current Scene in Browser on it. Not a normal thing to do for scene one but may help in pointing to the culprit.

--
Update on my looking at it.

It looks like the HypeLayoutRequest event is not being called when you use Preview Current Scene in Browser

I can only guess the Preview Current Scene in Browser* is not taking into account a scene is a layout..?

1 Like
13

Thanks for the extra investigation @MarkHunte! I've added this to the notes on the bug.

There is some specific code when doing a "Preview Current Scene in Browser" such that if you do have layouts it will make sure that layout gets shown regardless of the browser/window size so you're better able to preview it. In fact, the menu even changes to "Preview Current Layout in Browser" in this case. I'm guessing something we do to ensure the layout is interfering when there's only one but it is flexible. It wasn't evident at first glance though.

14

Sorry, before my edit above thought this may be the case but then tested with another layout added. I get the same thing so did not say single layout.

HypeLayoutRequest is not getting called regardless of one or more layouts?.

( I used responsive mode and and re Preview Current Scene in Browser in the iPad )

15

Yeah, I think we're short-cutting that code when you preview a specific layout.

I remember long ago having some discussion on if we should allow for a separate "preview current scene" from a "preview current layout", but it was decided that if you're using this functionality you probably what exactly whatever you're viewing to be what is displayed in the browser.

I'm guessing we have some sort of small bug where we're missing a little bit of code that's called through the normal path in the sizing. We may also want to go through a normal scene load path when there's not multiple layouts.

1 Like
16

It's amazing how this is only now being noticed after all this time. I would have thought one of us would have stumbled across this before now but I guess most of us preview through the standard Preview and when using Preview current scene we are normally again not testing layouts per se.

1 Like
17

Yeah - I think that justifies what we were doing was probably the correct tradeoff :slight_smile: (minus the bug which was reported). There's always these cases where it is iffy to add certain UI complexity for a 100% solution when it probably won't be used much... And if it ends up it is needed, folks usually give us feedback and we can just add later!

1 Like