Embedding another site page that is responsive

Elements
1

Whilst I try to find alternative methods for achieving what I am currently able to do in RW Classic with Stacks in Elements, I thought perhaps I could just embed in an iframe of the page using the html component. This works fine but the result is not responsive even though the Elements page itself is as is the page being embedded.

Is there a way to achieve this and make the embed page responsive?

Thanks

2

Hi @martef86

not sure how you put the html/iframe on your page. Do you have it in a Container or Flex? If not, wrap a Container or Flex around it and then you should be able to make the Container/Flex responsive.

3

Thank you Markus.

If the object is a PDF then it does not work for me responsively as I was using a stack to display the PDF. If I add the PDF as a resource, I can then open it in a new page but have not worked out how to embed it directly in the same page as yet. If I do add it then it is functionally not working (static).

With other items, I have found a number of frustrating issues. If I start with a blank template, add a container and then place the HTML into the container, it does not display anything. If I leave it outside the container, it works.

I have tried using some of the templates and have found that I can constrain it to a container but it will exhibit strange behaviours such as being behind every other object on the page or if I remove the other objects, it will be constrained to some small size that makes it pointless.

I have played around with various settings but with no luck.

The reason I want to do this is because I do not have solutions for Elements as yet but do for Classic . I do not want to open an external page separately as this would be confusing for a user. I want them to be able to navigate on the site whilst view the content in a defined section on the page.

The code I have tried (which appears to work OK) is as follows:

<div class="iframe-container">

<iframe

	src="website address"

	frameborder="0"

	scrolling="yes"

	allowfullscreen>

</iframe>

<

iframe-container {

	position: relative;

	width: 100%;

	padding-top: 100%;

	overflow: hidden;

}

.iframe-container iframe {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	border: 0;

}
4

Hi Frank @martef86

I do not have wide experience with PDF on websites, but I would say from all I know, the PDF is the issue. Usually with “normal” websites it is absolutely no issue to make them responsive but PDFs are rendered in different ways with the various browsers.

If you want, you can share your URL with one of the PDFs on it and I can give it a try. I have created a preview page for my fleXon library and are showing there hundreds of HTML websites in a kind of grid.

Looks like below or here fleXon

image
image1583Ă—1237 574 KB

5

Many moons ago I posted a PDF viewer in a jokey fashion to show how to do it staring the two moustachioed heroes:elementsapp://downloadDocument/0nHLfe4xWtYX have a look here and see if this helps?

6

Thanks. I have managed to sort out the issue with a stack. What I did was in Classic, I created a separate page with only the stack I need and positioned it how I want. Then in Elements I was able to display it correctly.

I made some adjustments to the code which fixed an issue I introduced.

I have not tried this new approach with the PDF yet but I am confident that it will work. Even if it doesn’t I am not so unhappy if it has to display in a new tab in full screen.

What this seems to indicate is that I can take all the functions that use stacks for which I do not have an Elements equivalent as yet and build a new site with Elements. Gradually I can replace the stacks as I get around to it or some developer comes up with an equivalent component.

7

If you want the code for pdf embed just ask but the project I shared above has it in HTML part.