Main Menu

Grid

Started by nolimitee, 14 March 2019, 09:39:20

nolimitee

Hello,

I'm currently trying to use Grid but I'm facing weird behavior.

The spacing between my widgets in the grid are way too important if I'm trying to create more than one row. So, my widgets are overflowing my parent container.
The grid is in vertical layout, and the vertical layout is in a Group::Ptr.

I've took multiple screenshots :

Screen with 5 widgets, 5 per row : "5elm-5pr.jpg"
Screen with 6 widgets, 5 per row : "6elm-5pr.jpg"
Screen with 12 widgets, 5 per row : "12elm-5pr.jpg"

And here is the code :

Code (cpp) Select

container_ = tgui::Group::create({ "30%", "100% " });
container_->setPosition({ "70%", "0%" });

verticalLayout_ = tgui::VerticalLayout::create();

tgui::Button::Ptr button = tgui::Button::create("");
button->getRenderer()->setTexture(ResourceManager::GetInstance().getTextureByName("panel"));
button->setSize(75, 75);

grid_ = tgui::Grid::create();

for (int i = 0; i < 12; ++i) {
tgui::Button::Ptr butt = tgui::Button::copy(button);
grid_->addWidget(butt, i / 5, i % 5);
}

verticalLayout_->add(grid_);

container_->add(verticalLayout_);

Gui.add(container_);


As you can see, the "5elm-5pr.jpg" is ok because the row number is always equals to "0". But when I'm trying to create more than row (e.g "6elm-5pr.jpg"), everything explodes.

Am i missing something ?

Thanks

EDIT :

I found out that this problem occurs only when the grid is in the vertical layout (c.f . 6elm-5pr-without-verticallayout.jpg").
But I would like to keep that layout. Is there a solution to compact the grid when it used in the layout ?

texus

#1
All your images are wrong for that given code actually, including 5elm-5pr.jpg.
The VerticalLayout will tell the grid what it's size should be. When a Grid is given a size, it will rearrange the widgets to fill this space. This rearrangement was broken, which caused the weird results, but even with only one line there should be space between the widgets to fill the entire width.

6elm-5pr-without-verticallayout.jpg doesn't have any extra space between the widgets because it is auto-sizing (the size of the grid is determined by the widgets inside it, as the grid wasn't given a size).

In my opinion the result of your code should be similar to my attached screenshots. I didn't write the code that adds spaces between the widgets to fill the size though, so feel free to propose alternatives if you believe it should look different.

You can download the code with the fix in Grid on github.

nolimitee

Ok thanks for your answer, i will check it out very soon.

Is there a way to compact the widgets in the upper left corner with that layout ? With tgui::Grid::Alignement::UpperLeft when using addWidget() maybe ?
I would like to have something organized like this : (6.png).

texus

VerticalLayout spreads the entire height among all widgets inside it, in this case just the Grid. So the height of the VerticalLayout (100% of parent by default) will be passed to the Grid. So you can just limit the height of the vertical layout:
Code (cpp) Select
verticalLayout_->setSize("100%", 150);

But if you are only putting 1 widget in VerticalLayout then you don't need it and you can just add the Grid directly to the container and call that setSize function on the grid widget.

nolimitee

Ok, yeah for the instance I showed with only the grid in it, but in my program I have more than one :)

So I tested with the fix and it works great, thanks for your support !