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
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

PA Community Call

Power Apps Community Call

Next call is happening on April 21st at 8a PST.

MBAS Carousel

Sign up for our May 4th event!

May the fourth be with you, join us online!

secondImage

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Users online (16,559)