How to modify Factbox width in webclient?

Eboy82

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 %;

jensthomsen

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...

Xwioch

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.

Like:

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?

Eboy82

yeah, i managed to overcome it through a hack of the CSS as well.
I used the example here as a startup.

https://www.kauffmann.nl/2019/01/22/pdf-viewer-in-business-central/

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;

//FACTBOXFIX
var myFrame = null;
var factBoxPaneContainer = null;
var parentBody = null;
//FACTBOXFIX


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;


//FACTBOXFIX
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} );