Column Layout Issues

[ocornut]

Received this:

Hi Omar!

Been using your ImGui library for a while and it's pretty fantastic! The only thing I've run into is >trying to do the contents of a single column in its entirety before moving on to the next column.

I'm not quite sure how to achieve this. My intended column looks something like this:

Column 1       | Column 2
---------------------------------
Multiline text | doCol2 = (Button B)
               |
               | if (doCol2) do a bunch of stuff.
               |
               |
               |
(Button A)     |

When I set up the columns my code looks like this:

ImGui::Columns(2);
ImGui::Text("Current target");
ImGui::Separator();
const Target &t(selected->GetTarget());
const Handle &h(t.handle);
auto textLastKnown = [](const char *label, const LastKnownVec2 &lastKnown)
{
    ImGui::Text("%s:\n"
                "    Vec2: (%f, %f)\n"
                "    Timestamp: %f\n",
                label,
                lastKnown.Get().x,
                lastKnown.Get().y,
                lastKnown.GetTimestamp());

    if (lastKnown.IsValid())
    {
        ImGui::TextColored(IMGUI_GREEN, "    Valid");
    }
    else
    {
        ImGui::TextColored(IMGUI_RED, "    Invalid");
    }
};

ImGui::Text("Handle:\n"
            "    type  = %zu\n"
            "    h     = %zu\n"
            "    count = %zu\n"
            "    ptr   = %#p\n",
            h.type,
            h.h,
            h.count,
            handles.GetPtr(h));
textLastKnown("Last known position", t.lastKnownPosition);
textLastKnown("Last known velocity", t.lastKnownVelocity);
textLastKnown("Last known orientation", t.lastKnownOrientation);
ImGui::Text("Priority: %d (%s)\n", t.priority, Target::PriorityToStr(t.priority));

if (t.haveLos)
{
    ImGui::TextColored(IMGUI_GREEN, "Have LoS");
}
else
{
    ImGui::TextColored(IMGUI_RED, "No LoS");
}

if (t.canSeeLastKnownPos)
{
    ImGui::TextColored(IMGUI_GREEN, "See last known pos");
}
else
{
    ImGui::TextColored(IMGUI_RED, "Can't see last known pos");
}

if (ImGui::Button("Clear current target"))
{
    selected->ClearTarget();
}

ImGui::NextColumn();
ImGui::Text("Custom target");
ImGui::Separator();

static bool doCustomTarget = false;
doCustomTarget ^= ImGui::Button(doCustomTarget ? "Stop custom target" : "Start custom target");

if (doCustomTarget)
{
    ImGui::Text("Do custom target!");
}

ImGui::Columns(1);

The resulting layout I've attached as images to this email.

Doing each "line" of work individually and switching columns every time would be quite laborious for >me to do. Am I missing something obvious here?

Dale Kim
Programmer at Stellar Jockeys

[ocornut]

1. This is a bug, the Columns API at the moment is severely broken if one tries to uses multiple widgets in the same "cell". I am working on it presently. Thanks for reporting it!

2. Additionally ImGui::Separator() was initially designed as spanning all columns. User may want to access both "separator within my column" and "separator spanning all columns" functionality. I will figure out an API for that.

[ocornut]

f1dcd72

I have fixed the columns API to handle multiple items per cell correctly.
The code should work but is a bit messy and short-sighted at the moment. Columns data aren't stacked, so you cannot open a tree containing columns containing a tree containing columns, Etc. Those things may come after a more dedicated pass at adding layout helpers.

Let me know if that works better for you!

ImGui::Separator() will still span entire column so you can't really use it in this context (yet).

[unpacklo]

This is awesome, it works much better!

The separator issue isn't a big deal in my use case, but might be nice to have. Been writing up my little debug GUI and this revision makes things much nicer with columns.

Great work!

[ocornut]

If you want a separation you can also use BeginChild/EndChild and have separate scrolling regions.

[ocornut]

Closing this. I have noted as a separate TODO the need for a Separator that works only within the current column.