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

The Godot Q&A is currently undergoing maintenance!

Your ability to ask and answer questions is temporarily disabled. You can browse existing threads in read-only mode.

We are working on bringing this community platform back to its full functionality, stay tuned for updates.

godotengine.org | Twitter

0 votes

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

in Engine by (251 points)

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

by (7,890 points)

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.

by (162 points)

@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.

by (7,890 points)

2 Answers

0 votes

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.

by (7,890 points)

Thanks for your answers eons. Will try them out.

by (251 points)

I will move this to an answer.

by (251 points)
edited by
+1 vote

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.

by (251 points)

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.

by (7,890 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.