Changing tab menu to content scroll

Webdesign Help
1

While it was my work for a long time it’s like 15 years I created a website and it’s getting fun again using Bootstrap Studio. Since my mind tends to overthink everything, I hope people here can push me in the right direction.

I’ve this dashboard for an online racing league and used the tab element so you can switch between practice times/driver standings/team standings and events.

dash
dash1443×1036 344 KB

This works well but I think it would be cooler/nicer to have actual the content of all four tabs inside the same div and make it automatically scroll to the right table/data.

The advantage is you don’t need to click a button but you can also just swipe down without clicking the tabs. They should change colour though to get the idea where you look at.

The yellow line is the dynamic height of the scrollable div based on the screen height of a device.

Since I’m a dino from the days when sites were made using a text-editor I was wondering if I could still use the tabs or is it way easier to do it in another way using for example the greensock.com gsap library to scroll to a certain anchor within the div.

Used GreenSock quite a lot in the Flash days, I’m just wondering what’s the best approach for something like this.

Thanks in advance!

2

Assuming you are using a table for your infomation you could use the following CSS:

.tab-pane {
  overflow-x: auto;
}

.tab-pane table {
  min-width: 1200px;
}

Set the min-width (or even width) to what suits your needs

1 Like
3

Thanks! I was also wondering a bit about the best approach in considering the html-elements. I’m now replacing the tab navigation with a