iFrame Not Expanding to Full Screen in Creatio Tab

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 the TabContainer and GridContainer.
  • Adjusting layoutConfig with rowSpan: 18.
  • Setting explicit height: 100% and width: 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 0

Like

1 comments

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.

Show all comments