safeframe icon indicating copy to clipboard operation
safeframe copied to clipboard

How can I make a safeFrame responsive?

Open Sandilly opened this issue 6 years ago • 4 comments

Is there a way to implement the safeFrame to be responsive? if so, can you provide an example on how I can achieve this? Right now, all the content just gets hidden, if I resize the browser.

Sandilly avatar Sep 11 '18 14:09 Sandilly

In the Yahoo version, it takes an aspect ratio for width/height settings to do just that, but I'm not sure the reference implementation has that. I've never gone back to adding all the extra stuff that we added when i was at Yahoo, mainly for lack of time. . .

You can probably do that or just allow % width/heights. The tricky part is that inside the frame you also need to know the configuration is using % b/c the baseline HTML has to change a bit so that 100%/100% on the HTML/BODY tag will work (main tag needs to be relative or statically positioned).

seansd-zz avatar Sep 11 '18 15:09 seansd-zz

You can probably do that or just allow % width/heights.

I don't think the host can configure the iframe to use % because according to the doc:

  • h: The height (in pixels) of the SafeFrame iframe to be created for the content specified.
  • w: The width (in pixels) of the SafeFrame iframe to be created for the content specified.
  • size: A string representing the width and height (in pixels) of the safe frame to be created for the content specified. Setting this value also sets the w and h properties respectively Example: "300x250"

Not sure if the only way to achieve this is to use the expand functionality?

Sandilly avatar Sep 18 '18 15:09 Sandilly

Yeah I know what's in the spec, but like I said earlier in the Yahoo version we expanded that further, that version accepts aspect ratio (which converts to 100% width + corresponding % of for height). As noted though we never got around to putting that in to the reference implementation

seansd-zz avatar Sep 18 '18 15:09 seansd-zz

Ah, got you. Thanks for your quick response!

Sandilly avatar Sep 18 '18 17:09 Sandilly