Responsive B4W canvas in IFRAME

05 April 2017 21:05

#16358

posts: 34

Hi,

I am implementing a B4W application that allows viewing of 3D objects in a separate dialog (using Twitter Bootstraps modal dialog: link) within an IFRAME. The aim is to ensure that the whole website/B4W application is reponsive and works well on, for example, iPads.

Nonetheless, unless I specify a specific width for the DIV of the canvas (code provided below), the B4W canvas does not resize to match the size of the container element (see attached screenshot).

<div id="entity_canvas_container" style="width: 868px; height: 320px;"></div>

I expect the problem is related to the Twitter Bootstrap dialog component (code provided below).

<div class="modal" id="entityDialog" tabindex="-1" role="dialog" aria-labelledby="entityDialogLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="entityDialogLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <iframe src="http://localhost:8000/entity_viewer/entity_viewer.html" width="100%" height="320" frameborder="0" id='entityViewer'></iframe>
                <hr/>
                <div class="entity-body-text">
                    ...
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Has anyone tried placing a B4W canvas in a Twitter Bootstrap dialog and have it behave in a responsive way?

Best regards,

Brett

06 April 2017 13:01

#16370

Evgeny Rodygin

posts: 644

Hi Brett,

The thing is that bootstrap modal resizes the canvas_container to 0x0 dimensions at the start. This leads to Blend4Web thinking that the canvas is completely invisible to the user because clientWidth and clientHeight properties equal zero. The engine tries to protect itself and resizes to 320x240. Also, this protects the canvas from bad camera aspect ratio values.

We'll reconsider this behavior to the next release.

As for now, I can recommend using something like this in the loaded callback:

function load_cb(data_id, success) {
    ...
    var el = $("#entity_canvas_container");
    el.width("100%");
    el.height("100%");
}

12 April 2017 08:26

#16483

Brett Kromkamp

posts: 34

Hi Evgeny,

Thanks for replying. Nonetheless, I have made several attempts to solve this issue (among others, following the approach you outlined above) without any success. I have come to the conclusion that there is more to this issue… potentially, also strange browser behaviour (if not a browser bug). If I solve this issue, I will post my solution here in the forum.

Brett

Forum

Responsive B4W canvas in IFRAME

Please register or log in to leave a reply.