Hi Creatio Community,
I'm integrating an iFrame into a Creatio tab for our Custom App. The integration works, but the iFrame does not expand to full screen inside the tab.
My Current Setup
I’m inserting the usr.FrameComponent
inside a TabContainer
, but it doesn’t fill the entire available space.
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[ ..., { "operation": "insert", "name": "GridContainer_Sales", "values": { "type": "crt.GridContainer", "items": [], "rows": "minmax(32px, max-content)", "columns": [ "minmax(32px, 1fr)" ], "gap": { "columnGap": "large", "rowGap": "none" }, "visible": true, "color": "transparent", "borderRadius": "none", "padding": { "top": "none", "right": "none", "bottom": "none", "left": "none" }, "alignItems": "stretch" }, "parentName": "TabContainer_Sales", "propertyName": "items", "index": 0 }, { "operation": "insert", "name": "Label_mmxxxre", "values": { "layoutConfig": { "column": 1, "row": 1, "colSpan": 1, "rowSpan": 18 }, "type": "usr.FrameComponent", "src": "https://www.smarten.com" }, "parentName": "GridContainer_Sales", "propertyName": "items", "index": 0 }, ... ]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
Issue
Even when I try using fitContent: true
or modifying layoutConfig
, the iFrame remains small and doesn’t adjust to the full tab size.
What I Tried
- Setting
fitContent: true
for theTabContainer
andGridContainer
. - Adjusting
layoutConfig
withrowSpan: 18
. - Setting explicit
height: 100%
andwidth: 100%
.
Has anyone encountered this issue? How can I make the iFrame take up the entire available space in the tab?
Thanks in advance for any help!
Like
Hi Tushar,
If you are currently utilizing the Customer FX guide, you may be experiencing an iFrame display anomaly similar to one I recently encountered.
To address this issue and ensure the iFrame renders in full screen, I implemented an update to the iFrame module.
Specifically, the following code modification resolves the problem:
this._frameConfig.style = (this._frameConfig.style || "") + "height:" + this.frameConfig.height + ";width:" + this.frameConfig.width + ";";
This adjustment guarantees the style
property is properly initialized before the height and width values are appended, thereby rectifying the display discrepancy.
Please let me know if you require further clarification or assistance.