Hype_container width wrong

Hello fellow Hype users,

we are having a div problem with its basic width. The inStyle options that are set to the hype_container is somewhat of a problem. When we have a Banner that has a size of 300x600px and when the scene and timeline divs get injected inside the hype_container the container has a width of 100%. And when we send out Banners for Adform.com they generate anclickTagbefore or around thehype_container. This results that the click-area is not the width of the banner, but of thehype_container` and that is often too wide, as it is set to 100% width.

See screen 1 and 2 for visual reference.

From what I can tell by looking at the screenshot, the Hype container div is using Flexible Layout (the scene width/height scale settings in the Scene Inspector are set to 100%), but it looks like your ad is just meant to only be 300x600? If so can you disable the flexible layout?

Otherwise it’d be great to get a copy of your .hype document and instructions on how you’ve setup the ad on adform to reproduce and take a closer look.

Hi @jonathan,

thank you for replying. I would like the banner to scale freely as it is an Sitebar Banner. But only the Banner and I can only set it to scale when I activate the layout to be flexible.

If there is an other way I would like to know about it. :slight_smile:

300x600_hans_waesche.zip (628.6 KB)

you can try to set scene- and documentwidth accordingly to the layoutratio.

keep responsivelayoutsettings and run the script On Prepare For Display:

let sceneEl = element;

window.addEventListener('resize', setWidth)

setWidth(e)

function setWidth(e){

let currLayout = hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName())[0]; //works only if there is just one layout ...

const ratio = currLayout.width/currLayout.height;

const windowHeight = window.innerHeight;

let absoluteWidth = ratio*windowHeight;
//console.log(absoluteWidth); console.log(windowHeight); console.log('')

hypeDocument.setElementProperty(sceneEl, 'width', absoluteWidth);

let hypeDoc = document.getElementById(hypeDocument.documentId());

hypeDoc.style.width = absoluteWidth + "px";

hypeDoc.style.position = 'absolute';
}

may work :slight_smile:

4 Likes

Everytime you write something with code Hans-Gerd, I am like this little kid looking the stars for the first time and I don’t know what I am seeing but it is magical.

1 Like