How to modify Factbox width in webclient?

Eboy82Eboy82 Member Posts: 25
Does anyone know the secret how to modify the width of factbox area in webclient?

I have a control-add displaying a PDF using pdf.js - works very nice in Windows Client, but I can't get it to work in web-client, as it's seems locked to it's default width no matter what I try with my control-addin.

I know the CSS parameter to change, but this is for BC SAAS, so I don't know how to "override" those parameters.

@media screen and (min-width: 1367px)
.ms-nav-layout-wide .ms-nav-layout-page-embedded .ms-nav-layout-aside-right)

In this i modify
flex-basis: 50%; and factbox takes up 50 %;


  • jensthomsenjensthomsen Member Posts: 173
    In BC16 it's still not possible to "drag an change" the width of the factbox-area....Did anyone come up with a solution? We are facing the same challenge as Eboy82 with size of a PDF viewer...
  • XwiochXwioch Member Posts: 11
    I'm not really in control-addins at this moment but, if the problem is to override your parameter over the standard css your can add "!important" after your code.

    flex-basis: 50% !important;

    I don't know if it's what your are asking.
    I'm anyway really curious to try it, can you provide a sample app or anything so I can try it in my environment?
  • Eboy82Eboy82 Member Posts: 25
    yeah, i managed to overcome it through a hack of the CSS as well.
    I used the example here as a startup.

    I've made some changes to the following in script.js - that sets the factbox area to fixed size of 725.

    var __ViewerFrame;
    var __ViewerOrigin;

    var myFrame = null;
    var factBoxPaneContainer = null;
    var parentBody = null;

    function InitializeControl(url) {
    __ViewerOrigin = getViewerOrigin(url);
    window.addEventListener("message", onMessage, false);
    var controlAddIn = document.getElementById('controlAddIn');
    controlAddIn.innerHTML = '<iframe id="viewer" style="border-style: none; margin: 0px; padding: 0px; height: 100%; width: 100%" allowFullScreen></iframe>'
    __ViewerFrame = document.getElementById('viewer');
    __ViewerFrame.src = url;

    parentBody = window.parent.document.body;

    iframes = $('iframe', parentBody);

    for (var i = 0; i < iframes.length; i++) {
    var parentBody = $("#viewer", iframes.eq(i).contents());
    if (parentBody.length === 1)
    myFrame = iframes.eq(i);


    //Factbox width and margin
    factBoxPaneContainer = myFrame.closest(".ms-nav-layout-aside-right,.aside-area-box");
    factBoxPaneContainer.css( { "flex-basis" : 725} );
    factBoxPaneContainer.css( { "margin" : 5} );

Sign In or Register to comment.