setSize of tgui::Tab

Started by billarhos, 21 October 2015, 16:10:53


Well, i reach to a point that i would like to have a tab box aligned in my form center position. However this is not possible because setSize(const Layout& width, const Layout& height) function doing nothing at all.

All other widgets are positioning well on form resize.




The problem with tab is that it's size depends on its contents, that is why setSize was never implemented.
I could map the height from setSize to the item height, but setting the width of a tab widget has no meaning.
This is a problem that I am aware of but at this point I have no idea how to solve it.


Well i had an idea and it is working just perfect!

Changing on resize window the setDistanceToSide it worked.

float dist = (float)Settings::handler()->layoutWidth(36).getValue();

maybe this will give you an idea....


I'm not sure what dist is in your example. But the distance to side is a space reserved for every tab inside the tab widget, so the calculation has to depend on how many tabs you have.

So it would start making a difference whether you first call setSize and then addTab or the other way around. Although that probably isn't going to be a big issue. Getting the same behavior between calling setSize before or after gui.add is however going to be harder to solve.

It might be doable, could you elaborate some more on how you calculate the dist variable?


My code work well no matter how many the items are.

here is a snipet:

tgui::Layout widthLayout = tgui::bindWidth(gui);

tgui::Layout Settings::layoutWidth(float width)
if (width > 1000.0f)
width = 1000.0f;

return widthLayout * width * / 1000.0f;


I'll take a better look at this in the next few days.


I'm still missing something here, what is the width (the 36 in your earlier example) that you pass to the layoutWidth function?
Could you put this in a small but more complete example?


It is nothing more than a value. It is the wanted width of setDistanceToSide.

Here is the sample project i 've just made.



I still don't understand how this is all working.
Probably because it isn't working here :)

In your example code you are not changing the view of gui thus everything is just stretched instead of resized. Dropping the onResize line doesn't change anything. I hope this was just a mistake in the example?

I tried to change the view on resize but I'm not sure what the program is supposed to do. Changing the height of the window has no effect while changing the width doesn't give good results when I make the window smaller (and my screen isn't big enough to see if it gives good results if I make it much bigger :) ).

If you would be able to make an example where the width of the tab always equals the size of the window and the height of the tab is e.g. 1/20 of the window height then I will probably be able to convert the code into something that fits inside the setSize function.


Well, the problem arise when you resize the main form. (Maximize)

To see the difference comment those lines 80,81

//float dist = layoutWidth(38).getValue();

and the lines in OnResize()

//tab->setTextSize(fontSize(16, width, height));

Just test by toggling between maximize and normal window.
If you remove those lines, you can see how tgui::tab behaves normally. (It is not stretching when application get maximized)

All other widgets can resize as expected when i set pos and size but not for tab.
As i said in a previous reply i managed to make tab behave just any other widget by manipulatiing Setdistancetoside.


The difference between windowed with such a high resolution and full screen probably is not big enough to show the stretching. Just try to make the width of the window 200 without changing the height while the program is running. If no setView function is called then it will stretch because the window is still using the 1280x800 resolution even though the window has a completely different ratio. If you don't see the text being squeezed by changing the width then you are not using the exact code than you send me.

I know my tab doesn't work decently without your code, but the problem is that I can't reproduce what you describe here. I would love to be able to make setSize work in the way that you describe with adapting setDistanceToSide but I just can't get it to work. The code you send still contains too many unrelated things (e.g. the 1000.0 contant) that make it harder to fully understand (plus running it as-is doesn't provide the effect that I hoped for either, otherwise I would get rid of the unrelated stuff myself).

I can't do much with the current code. I need to be able to clearly see the connection between the width of the window and the width of the tab, in the example I can't find a connection between the two. That's why I asked for an example where their widths are the same, then I can immediately see the connection.

I hope I'm not coming over as harsh, I really appreciate your help. I just can't turn what you showed so far in what I need to implement the setSize so that's why I ask to help me even more and reduce the code to the bare minimum so that there is a visible formula between the wanted size and the distance to side.


Of i see the same result here. It is because i use the function "tab->setTextSize(fontSize(16, width, height));"
in "onResize". All parts of tab should resize and this includes font resize. When you resize the window width to 200 then
font must be squeezed down. All programs have some limits that does not allow user for example to resize under 800.

I think i can understand what you a saying. My code works only for my program and behave not good if i set different text sizes in tabs. For example
if i set   "MyTab1",  "MyTab string is very big", for two tabs then i do not have the result i want. In other words i manage to resize tab widget because
i have some specific constants. All my texts have the same size of chars.

If i were you, i will start thinking in creating a setTabWidth function where the user will set the width of individual tab. For example if he set 30 for width and
he uses 3 tabs the the whole widget will get a 3*30 = 90 width. The texts should be align in center of each tab. In this way, i believe you can handle width much

Hope i help. I want to help. In bottom line, you did all that hard work and we are very appreciate for this.

Hope i


Having a fixed tab width would indeed simplify the calculation a lot but I don't want it to be limited. But having a way to set a fixed width is not a bad idea. Right now you can only set a maximum tab width, I already wanted an option to set a minimum width so why not also add a function to set a fixed width.

Thinking about the fixed width actually made me come up with a good implementation for the setSize function. You just set a width (e.g. 400) and it will be divided by the amount of tabs you have. If you have only one tab it would be 400 width and once you add another one they both get a width of 200. I can't believe I never though of implementing it like that before. I would still leave an auto-size way like it currently is so that the size can depend on the text in the tabs and doesn't has to be a preset value.

But both additions are going to require me to rewrite most of the code in the tab widget since all calculations will have to change. Since I don't have time for such big changes right now I guess the setSize will just have to remain empty a bit longer. At least now I have an idea on what to write in it, which is more than I had before this topic started :)


That is great.

Forget to explain about 1000 value.  Some people use per 100 value. I use 1000. Lets say i set 50 for width and  form's width is 1280.

Then the actual width in pixels is 50 * 1280/1000 = 64 pixels

The maximum value i can insert is 1000. Lets say i set 1000.

Then we have 1000 * 1280 / 1000 = 1280 (it is the form's width.)

So whatever the original width-height of the form are or whatever the size would be by resize - stretch  all my widgets keep their ratio on form.