Wrap Navigation Tabs for Mobile

This is a solution for making tabs wrap onto a new line for small screens. This tutorial assumes you have four sections that you would like to tab. You will have to adjust this code if you have more or less.

Step 1

Create a custom component details page (it doesn’t matter what the data Source is) and add the following code to the template section. 

<div class="w3-bar w3-dark-grey">
    <button class="w3-bar-item w3-button tablink w3-large w3-deep-orange" onclick="openSection(event,'x_element_page_20_17')">Info</button>
    <button class="w3-bar-item w3-button tablink w3-large" onclick="openSection(event,'x_element_page_20_15')">Employees</button>
    <button class="w3-bar-item w3-button tablink w3-large" onclick="openSection(event,'x_element_page_20_13')">Rates</button>
    <button class="w3-bar-item w3-button tablink w3-large" onclick="openSection(event,'x_element_page_20_7')">Bond Aplications</button>
</div>

{{#each records}}

    <!-- Select fields from the left to be added here -->

{{/each}}

Remember to change x_element_page_xx_xx ID’s and update them to your IDs. You can find your element ID on the live app, as shown in this image.

Step 2

On the JavaScript tab of the custom component page, paste the following code, then save and close the custom component.

function openSection(evt, sectionName) {
    var i, x, tablinks;
    x = document.getElementsByClassName("tab-section");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < x.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" w3-deep-orange", "");
    }
    document.getElementById(sectionName).style.display = "block";
    evt.currentTarget.className += " w3-deep-orange";
}

Step 3

On the main JavaScript page, add the following code and update the x_element_page_xx_xx ID’s)

var element = document.getElementById("x_element_page_20_17");
element.classList.add("tab-section");
var element = document.getElementById("x_element_page_20_7");
element.classList.add("tab-section");
var element = document.getElementById("x_element_page_20_13");
element.classList.add("tab-section");
var element = document.getElementById("x_element_page_20_15");
element.classList.add("tab-section");

Step 4

Add this script to the Custom Header under your app settings.

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Original Community Post:

Wrap Tabs on Mobile - Community Discussions / How Do I - Tadabase Community