Change filter tabs to a dropdown in mobile view

Showcase
1

If you have a table with filter tabs and you would like to change them to a dropdown on mobile you can use this javascript (Just change the 15 to your component number, you can also apply this to multiple tables by comma separating the component numbers like this: [‘15’,‘16’,‘17’]):

['15'].forEach(function(componentId) {
  var containerId = 'x_element_page_10_' + componentId;
  var container = document.getElementById(containerId);

  if (!container) return;

  setTimeout(function() {
    if (window.innerWidth > 768) return;

    var tabList = container.querySelector('.filter-tabs ul.nav-tabs');
    if (!tabList || tabList.classList.contains('converted-to-dropdown')) return;

    var select = document.createElement('select');
    select.className = 'form-control tab-dropdown';
    select.style.marginBottom = '10px';

    var listItems = tabList.querySelectorAll('li');
    listItems.forEach(function(li, index) {
      var a = li.querySelector('a');
      if (!a) return;

      var option = document.createElement('option');
      option.textContent = a.textContent.trim();
      option.value = index;
      if (li.classList.contains('active')) option.selected = true;

      select.appendChild(option);
    });

    select.addEventListener('change', function(e) {
      var selectedIndex = parseInt(e.target.value);
      var targetLink = tabList.querySelectorAll('li')[selectedIndex].querySelector('a');
      if (targetLink) targetLink.click();
    });

    tabList.parentNode.insertBefore(select, tabList);
    tabList.style.display = 'none';
    tabList.classList.add('converted-to-dropdown');
  }, 500); // longer delay for list components to render
});

To make the styling look a little better you can add this to the CSS tab:

/*Mobile Dropdown styling*/

.tab-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px 40px 10px 15px;
  font-size: 16px;
  color: #333;
  width: 100%;
  max-width: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: border 0.3s ease;
}

.form-control {
    height: 44px;
}

Go from this:
image

To this:
image

2 Likes
2

@SuiteUpstairs

I believe there’s already a similar plugin I’ve used before, but it displays the dropdown on all devices, not just on mobile.

3

You are correct; the reason I built this one is that my client wanted tabs on desktop and a dropdown on mobile.

You don’t even need a plugin anymore to show a dropdown on all devices, it’s native feature now:
image