Can the width of Tabs be increased, so the selected one overlaps the others?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By whooshfrosted
:warning: Old Version Published before Godot 3 was released.

I’ve posted some example pictures of a game that does it here. Look where the yellow arrow is pointing.

http://i63.tinypic.com/e6o9bb.jpg
http://i64.tinypic.com/30t2om1.jpg
http://i64.tinypic.com/28k3fhi.jpg

I’m not sure if that is possible with tabs, what you can do is to use many panels and change the layers or make a single texture that fakes the selection-on-top illusion

eons | 2017-03-17 11:19

eons that’s actually a great idea.

I suggest you post this as an Answer, since if I didn’t open the post to check for comments I would’ve missed it.

M. Alkotob | 2017-03-19 20:11

@M.Alkotob posted as a comment because I’m not sure if is a valid answer (and prefer to leave it as unanswered), not much experience with tabs, yet.

I need to do some heavy work with controls this week and will try check on this, maybe themes can be used for this too.

eons | 2017-03-19 22:18

:bust_in_silhouette: Reply From: eons

I was trying many things and the tab separation seems fixed…

What I can suggest is disabling the tabs (not visible) and replace them with overlapped toggle buttons, each button should activate a tab and on toggle, you will need to uncheck current button and reorder all the buttons.

Pressed and released textures will do the rest of the effect.

ps: Overlapping tabs is a cool and not uncommon visual effect, you can make a feature request for that if you wish.

Thanks for your answers eons. Will try them out.

whooshfrosted | 2017-03-24 06:16

I will move this to an answer.

whooshfrosted | 2017-03-24 22:14

:bust_in_silhouette: Reply From: whooshfrosted

To make this work you need to use a StyleBoxTexture (and maybe a Theme) and experiment with the different Expand settings in StyleBoxTexture. The image will look stretched until you turn off mipmaps and filter flags in the StyleBoxTexture’s Texture field.

So in TabContainer the settings to play with are inside Tab Fg and Tab Bg. Set it to use a StyleBoxTexture. Then go into the StyleBoxTexture add your image and play with the settings.

Oh, I always forgot about the texture option flags.

I guess input will be always for the foreground tab in case of using mouse and clicking a border, but if the overlap and texture looks fine, should be enough.

eons | 2017-03-25 21:07