Unanswered

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)

ragavanrajan 7,044 Most Valuable Professional on at

Like (1)

Report

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

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

That works. Thank you!

Was this reply helpful? Yes No