Align vertical splitter below horizontal splitter

[fraserhealey]

Hey,

static float w = 200.0f; static float h = 300.0f; ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(0, 0)); ImGui::BeginChild("child1", ImVec2(w, h), true); ImGui::EndChild(); ImGui::SameLine(); ImGui::InvisibleButton("vsplitter", ImVec2(8.0f, h)); if (ImGui::IsItemActive()) w += ImGui::GetIO().MouseDelta.x; ImGui::SameLine(); ImGui::BeginChild("child2", ImVec2(0, h), true); ImGui::EndChild(); ImGui::InvisibleButton("hsplitter", ImVec2(-1, 8.0f)); if (ImGui::IsItemActive()) h += ImGui::GetIO().MouseDelta.y; ImGui::BeginChild("child3", ImVec2(0, 0), true); ImGui::EndChild(); ImGui::PopStyleVar();

I got this code from #125.
I'm trying to learn more about splitters and such.
The first thing i tried to do was move the vertical splitter to below the horizontal splitter. I've spent the last hour and a half on this, and for some reason, just can't seem to re-position it below the horizontal one. Any advice/help/recode would be much appreciated.

[ocornut]

Hello,
Would using Docking perhaps allow you to not have to use this splitter pattern?

[fraserhealey]

Is docking available on 1.67?

Furthermore, i'm looking to have my elements pre-placed. I don't want to have to drag them each time.

[PathogenDavid]

Is docking available on 1.67?

No, it's currently in an experimental branch, details in #2109.

515ad62 would be the 1.67 version of the docking branch if you don't want to deal with upgrading stuff, but I'm not sure I'd recommend using such an old version of the docking branch.

Furthermore, i'm looking to have my elements pre-placed. I don't want to have to drag them each time.

You can use the dock builder API to do this.

[fraserhealey]

Thank you, i'll take your advice into consideration.

I'm going to focus on my original question for now, then learn about the docking branch.

How am i able to position the vertical splitter below the horizontal?

[PathogenDavid]

The important thing is that the children above hsplitter must use h as their height and the children left of vsplitter must use w as their width. Children with no splitter to the right use 0 for width, children with no splitter below use 0 for their height. (0 is basically just a shortcut for GetContentRegionAvail.)

You also have to use ImGui::GetContentRegionAvail().y for the height of vsplitter since its height since h represents the area above the hsplitter but you need the area below.

ImGui::Begin("GH-4261 (Flipped)");
static float w = 200.0f;
static float h = 300.0f;
ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(0, 0));

ImGui::BeginChild("child1", ImVec2(0, h), true);
ImGui::Text("Child1");
ImGui::EndChild();

ImGui::InvisibleButton("hsplitter", ImVec2(-1, 8.0f));
if (ImGui::IsItemActive())
    h += ImGui::GetIO().MouseDelta.y;

ImGui::BeginChild("child2", ImVec2(w, 0), true);
ImGui::Text("Child2");
ImGui::EndChild();

ImGui::SameLine();
ImGui::InvisibleButton("vsplitter", ImVec2(8.0f, ImGui::GetContentRegionAvail().y));
if (ImGui::IsItemActive())
    w += ImGui::GetIO().MouseDelta.x;
ImGui::SameLine();

ImGui::BeginChild("child3", ImVec2(0, 0), true);
ImGui::Text("Child3");
ImGui::EndChild();

ImGui::PopStyleVar();
ImGui::End();