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?
Solved! Go to Solution.
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.
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.
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:
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.
That works. Thank you!
Stay up tp date on the latest blogs and activities in the community News & Announcements.
Dive into the Power Platform stack with hands-on sessions and labs, virtually delivered to you by experts and community leaders.
User | Count |
---|---|
10 | |
9 | |
2 | |
1 | |
1 |