Answered

How to center IFrame embedding in portal page?

(0) Share

Report

Posted on by poweruser132564

I've embedded a canvas app into a portal using IFrame, but for some reason I cannot get the IFrame to be centered on the screen. The frame is shifted to the right, leaving a large gap on the left.

Has anyone had any luck centering an IFrame--removing the gap on the left side of the screen?

Categories:

Power Apps portals

I have the same question (0)

All responses (4)

Answers (1)

Sort by

ragavanrajan 7,044 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

Hi @poweruser132564 , you can add your custom css to remove the padding / margin on the left of your iframe and make it center.

To do this here are the steps:

1. Edit the portal app
2. Click on themes > Edit CSS > upload custom css >

3. Then inspect the element and take the class and add the element in custom css and remove your left padding/ margin.

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Was this reply helpful? Yes No
poweruser132564 14 on at

Like (0)

Report
Copy link

Link copied!

Thank you! I added the following, and was able to make the screen responsive in size, but it's still not centered. Not sure what I'm doing wrong!

CSS:
.container {
justify-content: space-evenly;
align-content: center;
text-align: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}

HTML:
<div class="container"><iframe frameborder="0" src="https://apps.powerapps.com/play/f5aa049d-a5b6-4eda-a63d-b469b071dcfb?tenantId=6432b247-02c7-412e-b709-3b2b0efcc471" allowfullscreen="true" style="display: block; width: 100%; height: 100%;"></iframe></div>

Was this reply helpful? Yes No
Verified answer

ragavanrajan 7,044 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!
Hi @poweruser132564

I have done the test and all you need to center your iframe is using one column component. You dont need a custom css. Attaching the screenshot and code for your reference

and the HTML

<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; text-align: left; min-height: 100px; padding: 8px; margin: 0px;"> <div class="container" style="display: flex; flex-wrap: wrap;"> <div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column;"><iframe frameborder="0" src="https://apps.powerapps.com/play/e51b52sdffs-4173-b4e5-2aa62d56f871?tenantId=fasfsd3ec-9d6d-145e7e36a1a5&source=portal&" style="width: 100%; height: 600px; display: block;"></iframe></div> </div> </div>

Hope it helps. Thanks

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Was this reply helpful? Yes No
poweruser132564 14 on at

Like (0)

Report
Copy link

Link copied!

That works. Thank you!

Was this reply helpful? Yes No