Making Embeddable Tabbed Interface Responsive

[kpcollier]

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 )

 

 

[Glitch]

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.

 

Glitch.

[SunakoChan]

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

I hope this helps.

 

[SinJunYoung]

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

Hi- you may check this Howto article to make the DataPage responsive: https://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. 

[Kurumi]

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

document.getElementById('some_frame_id').contentWindow.location.reload();

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:

<script>
 function getElementByClass(classer) {
 var allHTMLTags=document.getElementsByTagName("*");
 var array = [];
 for (i=0; i<allHTMLTags.length; i++) {
 if (allHTMLTags[i].className==classer) {
 array.push(allHTMLTags[i]);
 }}
 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";
   frames[i].contentWindow.location.reload();

 }else{ frames[i].style.display = "none";}}}
 </script>
 
 <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>
 
 </ul>
 </div>
 
 <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>
 
 </div>
 </div>

The change is by adding this code:

frames[i].contentWindow.location.reload();