Tabs element, conditional rending of separate tabs leaves published page with huge gaps

So I have this Tabs element with 4 tabs. Sometimes I need to render all tabs but most of the times I’m just rendering 2 out of the 4 tabs. But this somehow leaves me in my app with a huge gap between the 1st and the 4th tab, for instance when I dont render the 2nd and 3rd tab. Why is this not aligning up nicely?

Hi @alexanderl :wave:

Can you share a video or screenshots of how things are setup on your side? It’ll help us reproduce your use case. For example, from your description, I don’t know how you setup the conditional rendering of the tabs.


What I want to achieve is that the tabs shift 1 spot to the left if there’s an empty spot. That would be much neater.

@Joyce sorry forgot to tag you :slight_smile:

Hi @Joyce , was wondering if you had a moment to look at the screenshots :slight_smile: Thanks!

Reported the same issue a while ago. Need to wait for an update on this element or build tabs yourself. Reordering tabs would also be a nice feature to have. Now I have to completely rebuild the tabs when I need to reorder.

Yeah exactly, reordering would be nice, this is kinda painful at the moment.

Ah, sorry for the late reply, I missed the notification!

I think @FHEXL is correct and it’s a limitation of our current tabs element. You’ll get more flexibility if you build your own tabs component.

Improving these ready-made elements is on our roadmap but we’re waiting for two things first:

  1. the marketplace, which will be released in a couple of weeks. We think / hope community members will share some of their components on there so other, less design-savvy users can save a bit of time.
  2. the cleaning of the DOM (we’ll be removing loads of wrappers that can make it trickier to play with elements). Dev work has started on this but it’s quite a big project so hard to give an ETA for this right now.