cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
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
Responsive Resident
Responsive Resident

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

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>

 

Responsive Resident
Responsive Resident

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
News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

PP Bootcamp Carousel

Global Power Platform Bootcamp

Dive into the Power Platform stack with hands-on sessions and labs, virtually delivered to you by experts and community leaders.

secondImage

Power Platform Community Conference On Demand

Watch Nick Doelman's session from the 2020 Power Platform Community Conference on demand!

Users online (7,394)