CXJS получить доступ к элементам по идентификатору после рендеринга?

Question

У меня есть I-Frame со встроенным контентом.

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>

Поскольку i-кадрам нужна высота в пикселях, я использую контроллер, чтобы применить слушатель изменения размера, и мне нужно изначально установить высокие фреймы напрямую.

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;


   }    
}

Как я могу установить начальную высоту iframe? Ссылки, как реагировать, также не работают. Конечно, это не означает, что пользователю необходимо изменить размер окна браузера, чтобы получить полноразмерный i-кадр.;)

Спасибо:-)

Answer 1

Эта проблема обычно решается с помощью CSS flexbox, примененного к разделам bodyStyle,

https://fiddle.cxjs.io/?f=Kjarwesn

Раздел должен иметь явный набор высоты, который можно указать в пикселях относительно высоты области просмотра (vh) или снова с помощью 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>