Jump to content
  • 0

Responsive Embedable Tabbed Interface



I've built an embedable tabbed interface that contains 3 iframe tabs, using the standard Caspio code http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-embeddable-tabbed-interface/.


One tab is a pivot table, another a tabular report, the other is a list.  I've deployed the whole interface using the embedded option.  But how can I make this whole package responsive?   Do I apply Caspio responsive code to each report separately, to the interface, or what?


Any help appreciated.


Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

I've successfully tested this plugin with Caspio iframes on a private domain.



I don't know how all of it works, but I get the idea that responsive iframes that cross domains are tricky because you are loading your page, then the frame, then the frame loads its content, then you need to set your host page's iframe to the final frame dimensions, which are dynamic depending on report content.


I think this could work well for a single-page application, and it sounds like that's what you need, but I prefer to work with multiple browser tabs. When you use iframes, links are bound within the frame unless you code the link to control the parent document (that plugin provides a method), in which case you have a <a href="javascript:..."> link, which doesn't behave like a normal link across all browsers. For example, the user can't middle-click such links choose to open in a new tab.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...