cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Phineas
Post Prodigy
Post Prodigy

Can I Crop a Power Apps Portal iframe

I am practicing with a Power Apps Portal iframe. The content is shown below.

 

I would like to format the iframe so that all of the top (red) is hidden and the same amount of space below the picture is revealed; basically shorten the page displayed in the view by a few inches from the top.

 

I tried padding, that had the wrong effect.

 

Phineas_0-1641409362680.png

 

</div><iframe frameborder="0" src="https://www.---/subjects/concessions/index.htm" style="max-width: 100%; width: 100%; height: 550px; margin-left: auto; margin-right: auto;"></iframe>

 

1 ACCEPTED SOLUTION

Accepted Solutions
chleverenz
Super User
Super User

Hi @Phineas ,

we are also using portal pages within iframes, especially when embedding knowledge base articles or suppourt requests into exiting sites of customers.

As @NikitaPolyakov said, it depends a little bit on what you want to achieve. Basically you have some options:

  • set up a page which does not use header and footer (set in the page template). The challenge on that one is, that you get a plain html page and have to do everything on your own.
  • usually, you do not need the navigation in iframes, so basically you could hide the navigation by jQuery. The actual selection of the element depends on your specific header template.

additonally, i usally introduce a small script in the iframe and the embedding page to resize the igrame besed on its size needs.

So, in the iframe i have code like:

var sendsize = function() {
          window.parent.postMessage('{ "message":"resizefromserviceportaliframe" , "scrollHeight":' + document.body.scrollHeight + ',"scrollWidth":' + document.body.scrollWidth + '}',"*");
        }
        $(window).resize(sendsize);
        sendsize();
which sends the actual size to the hosting window (yes, a pedestrian json, i know 🙂 ) and the hostingwindow has a listener which decodes the message and sets the size of the iframe accordingly.
Hope this helps pointing in a solutiondirection,
  Christian
 
PS it could be that you have to enable portals to be allowed to be displayed in iframes and/or the hosting site  to enable content from other domains by sending the corresponding csp-headers (see here: https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/cors-support (especially HTTP/Content-Security-Policy) for details).

View solution in original post

2 REPLIES 2
NikitaPolyakov
Microsoft
Microsoft

That's more about the content inside of the iFrame, not sure you are meant to modify the content inside of iFrame

 

Mayby someone stronger in web-front-end coding can help, but generally undertain what you are doing is common place...in fact key learning I relay when people want to build a Portal to be used inside of iFrame is they should consier and design for that expereince from the start

chleverenz
Super User
Super User

Hi @Phineas ,

we are also using portal pages within iframes, especially when embedding knowledge base articles or suppourt requests into exiting sites of customers.

As @NikitaPolyakov said, it depends a little bit on what you want to achieve. Basically you have some options:

  • set up a page which does not use header and footer (set in the page template). The challenge on that one is, that you get a plain html page and have to do everything on your own.
  • usually, you do not need the navigation in iframes, so basically you could hide the navigation by jQuery. The actual selection of the element depends on your specific header template.

additonally, i usally introduce a small script in the iframe and the embedding page to resize the igrame besed on its size needs.

So, in the iframe i have code like:

var sendsize = function() {
          window.parent.postMessage('{ "message":"resizefromserviceportaliframe" , "scrollHeight":' + document.body.scrollHeight + ',"scrollWidth":' + document.body.scrollWidth + '}',"*");
        }
        $(window).resize(sendsize);
        sendsize();
which sends the actual size to the hosting window (yes, a pedestrian json, i know 🙂 ) and the hostingwindow has a listener which decodes the message and sets the size of the iframe accordingly.
Hope this helps pointing in a solutiondirection,
  Christian
 
PS it could be that you have to enable portals to be allowed to be displayed in iframes and/or the hosting site  to enable content from other domains by sending the corresponding csp-headers (see here: https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/cors-support (especially HTTP/Content-Security-Policy) for details).

Helpful resources

Announcements
PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

Microsoft Build 768x460.png

Microsoft Build is May 24-26. Have you registered yet?

Come together to explore latest innovations in code and application development—and gain insights from experts from around the world.

May UG Leader Call Carousel 768x460.png

What difference can a User Group make for you?

At the monthly call, connect with other leaders and find out how community makes your experience even better.

Users online (1,655)