# Force Tabs module (not tabs container) to scroll horizontal on desktop

**URL:** <https://community.glideapps.com/t/force-tabs-module-not-tabs-container-to-scroll-horizontal-on-desktop/84263>\
**Category:** Ask for Help\
**Created:** [September 8, 2025, 5:39pm UTC](https://community.glideapps.com/t/force-tabs-module-not-tabs-container-to-scroll-horizontal-on-desktop/84263 "2025-09-08T17:39:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndrewJ](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrewj/32/84903_2.png) [@AndrewJ](https://community.glideapps.com/u/AndrewJ)\
**Post date:** [September 8, 2025, 5:39pm UTC](https://community.glideapps.com/t/force-tabs-module-not-tabs-container-to-scroll-horizontal-on-desktop/84263/1 "2025-09-08T17:39:28Z")

</div>

Currently the tabs module defaults to adding a “More” button on the right hand side if there are more tabs than can fit on the screen. On Mobile, this doesn’t happen and it’s just scrollable. Can I force it to be scrollable on desktop without a “more” button?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 9, 2025, 1:08am UTC](https://community.glideapps.com/t/force-tabs-module-not-tabs-container-to-scroll-horizontal-on-desktop/84263/2 "2025-09-09T01:08:14Z")

</div>

No native solution for this I believe, it should be a feature request.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 9, 2025, 3:38am UTC](https://community.glideapps.com/t/force-tabs-module-not-tabs-container-to-scroll-horizontal-on-desktop/84263/3 "2025-09-09T03:38:49Z")

</div>

I was just testing directly in the DOM without adding any class names. This seems to work:

```auto
[data-orientation="horizontal"] > div {
  width: 100vw;
}

[data-orientation="horizontal"] {
  overflow-x: auto;
  scrollbar-width: none;
}

[data-orientation="horizontal"]::-webkit-scrollbar {
  display: none;
}

```

This ensures that the horizontal tabs fit the full viewport width, allow horizontal scrolling, and hide the scrollbar across browsers.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 10, 2025, 12:28am UTC](https://community.glideapps.com/t/force-tabs-module-not-tabs-container-to-scroll-horizontal-on-desktop/84263/4 "2025-09-10T00:28:25Z")

</div>

That’s genius, so I assume this means you force the component to fit the width so it doesn’t trigger a state where it has to use “More” right?

Was there a div width limit that triggered the “More” button on specific screens, so you assigned it 100vw? Or was overflow-x limited?

Thanks for sharing.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 10, 2025, 1:18am UTC](https://community.glideapps.com/t/force-tabs-module-not-tabs-container-to-scroll-horizontal-on-desktop/84263/5 "2025-09-10T01:18:38Z")

</div>

Glide’s JS decides to show the “More” button whenever the tabs don’t fit within their container, which can depend on the parent container’s width or the viewport. By setting the container width to 100vw (or higher for very long tabs), I essentially bypass Glide’s internal check and prevent the “More” button from appearing.

So, using vw here is a practical hack—not an official rule, just a way to work around Glide’s JS behavior while keeping the tabs scrollable horizontally.

![ScreenRecording2025-09-10084452-ezgif.com-video-to-gif-converter](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/7/f74e9f46d0b8f6afff5e45e02ed75d5ad91aba84.gif)

Alternatively, you can use `width: min-content` on the container:

```auto
[data-orientation="horizontal"] > div {
    width: min-content;
}

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 10, 2025, 2:41am UTC](https://community.glideapps.com/t/force-tabs-module-not-tabs-container-to-scroll-horizontal-on-desktop/84263/6 "2025-09-10T02:41:55Z")

</div>

Thank you, that’s so genius!