cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
poweruser132564
Frequent Visitor

How to center IFrame embedding in portal page?

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?

 

poweruser132564_1-1605652604835.png

 

1 ACCEPTED SOLUTION

Accepted Solutions
ragavanrajan
Super User
Super User

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 

 

ragavanrajan_0-1606252170451.png

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&amp;source=portal&amp;" 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.

 

View solution in original post

4 REPLIES 4
ragavanrajan
Super User
Super User

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 > 

 

ragavanrajan_0-1605653798516.png

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.

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-b70..." allowfullscreen="true" style="display: block; width: 100%; height: 100%;"></iframe></div>

 

ragavanrajan
Super User
Super User

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 

 

ragavanrajan_0-1606252170451.png

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&amp;source=portal&amp;" 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.

 

View solution in original post

That works. Thank you!

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Top Solution Authors
Users online (3,286)