Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I make a safeFrame responsive? #20

Open
Sandilly opened this issue Sep 11, 2018 · 4 comments
Open

How can I make a safeFrame responsive? #20

Sandilly opened this issue Sep 11, 2018 · 4 comments

Comments

@Sandilly
Copy link

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.

@seansd-zz
Copy link
Collaborator

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).

@Sandilly
Copy link
Author

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?

@seansd-zz
Copy link
Collaborator

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

@Sandilly
Copy link
Author

Ah, got you. Thanks for your quick response!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants