Jump to content
  • 0

Making Embeddable Tabbed Interface Responsive



I have created an embeddable tabbed display found in the Caspio HowTo article. I have 6 pages, or tabs, on this ETI.

I have used the embedded code deployment method to deploy the ETI onto my Weebly site. It works great on a Laptop/Desktop.

However, when viewing through a mobile device, the responsiveness is lost. The smaller the screen you use, the less tabs that show up on the ETI. If you flip it to landscape view, you see all of the tabs. But in portrait, they are cut off.  I have tried creating media queries for the code provided in this article but have not had any luck: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-embeddable-tabbed-interface/ 

Here is a picture of viewing through iPad with 5 of 6 tabs showing (disregard the 9 errors in devtools, they are all from weebly themes :rolleyes:)



Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

If you already put the responsive codes inside your DataPage, like what's mentioned here.


Have you perhaps included this on your website?

  1. <meta name="viewport" content="width=device-width, initial-scale=1">


Also, you may need to add some codes inside the media query string to make other containers responsive.


I have tried something like this as well, and some of the HTML blocks and other containers does not respond with the responsive codes. But with a little help of selectors and some CSS, I got it to work.


(Why is the text blue). Oh well. I hope this helps.



Link to comment
Share on other sites

  • 0
On 4/13/2019 at 9:43 AM, SunakoChan said:

Hi- you may check this Howto article to make the DataPage responsivehttps://howto.caspio.com/tech-tips-and-articles/responsive-datapages-overview/.

I hope this helps.


In addition with this, you might be wondering why some of the interface works well with your Desktop but not in  mobile, especially in an iPhone. You can find related articles here: https://howto.caspio.com/tech-tips-and-articles/mobile-iphone-ipad-android/ to modify your website according to the mobile view of your preference. 

Link to comment
Share on other sites

  • 0

 Hi - Just wanted to share this specific code to refresh/reload the iFrame in your DataPage.


Reference: https://stackoverflow.com/questions/86428/what-s-the-best-way-to-reload-refresh-an-iframe

This can be applicable to this article: https://howto.caspio.com/tech-tips-and-articles/create-embeddable-tabbed-interface/

This article provides a script for Tabbed interfaces. As the script is using iFrames, every change of tab - the DataPage will remain as it is. If you are using a Report DataPage, it will not load the new data. As a workaround, you can edit the code that will reload the iFrame with every click of the tab.

Updated script:

 function getElementByClass(classer) {
 var allHTMLTags=document.getElementsByTagName("*");
 var array = [];
 for (i=0; i<allHTMLTags.length; i++) {
 if (allHTMLTags[i].className==classer) {
 return array;}
 function channel(n){
 var frames = getElementByClass("ChannelView");
 var length = frames.length;
 for(var i = 0; i < length; i++)
 { if(frames[i].id == ("viewer"+ n))
 { frames[i].style.display = "inline";

 }else{ frames[i].style.display = "none";}}}
 <div style="display:block; text-align:left;">
 <div style="display:block;">
 <ul id="menu">
 <li><a onclick="channel(0)">Tab 0</a></li>
 <li><a onclick="channel(1)">Tab 1</a></li>
 <li><a onclick="channel(2)">Tab 2</a></li>
 <div class="content">
 <iframe frameborder=0 id="viewer0" class="ChannelView" src="URL of Tab 0" style="display:inline"></iframe>
 <iframe frameborder=0 id="viewer1" class="ChannelView" src="URL of Tab 1"></iframe>
 <iframe frameborder=0 id="viewer2" class="ChannelView" src="URL of Tab 2"></iframe>

The change is by adding this code:



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