CXJS access elements by ID after rendering? - cxjs

Question

I have an I-Frame with embedded content.
import {HtmlElement, Link, Section} from 'cx/widgets';
import Controller from './Controller'
export default <cx>
<h2 putInto="header">
Home
</h2>
<Section mod="card" controller={Controller}>
<iframe style='border:1px' src:bind="$page.url" id="contentFrame" width="100%"></iframe>
</Section>
</cx>
As i-frames need a height in pixels i use a controller to apply a resize-listener and need to initially set iframes high directly.
import { Controller } from 'cx/ui';
export default class extends Controller {
onInit() {
var url = "https://myContentUrl/?foo=bar&PHPSESSID=" + currentDashboard.customData.session + "&someMore=1";
this.store.init("$page",{url:url});
window.onresize = function(event) {
document.getElementById("contentFrame").height = window.innerHeight-125;
};
//the following is always null as it seems not to be initialised yet.
document.getElementById("contentFrame").height = window.innerHeight-125;
}
}
How can I set the initial hight of the iframe? References like react also dont work. It is sure not intended, that a user needs to resize the browsers window to get a full size i-frame. ;)
Thanks :-)

Answer 1

This problem is commonly solved using CSS flexbox applied on Section's bodyStyle.
https://fiddle.cxjs.io/?f=Kjarwesn
The section needs to have an explicit height set which can be specified in pixels, relative to viewport height (vh) or again using flexbox.
<Section
title="Section"
mod="card"
style="height: 50vh; border: 1px solid red"
bodyStyle="display: flex; flex-direction: column"
>
<iframe src="..." style="flex: 1 1 0%" />
</Section>