Imgui: Sizing a child area to fit its content? --> group with border

[dnotq]

The BeginChild() function requires an ImVec2 to specify the size of the child. The problem is, I don't know the size of the content at the point where I have to make the BeginChild() call.

I have tried passing in ImVec2(0,0) and ImVec2(-1,-1), but they both cause the child to size to its parent instead of its content.

What did work was ImVec2(0, -ImGui::GetContentRegionAvail().y) until this morning when I pulled the latest changes. Now I get an Assert error on line imgui.cpp:4523 (IM_ASSERT(window_size_x_set_by_api && window_size_y_set_by_api);).

What I am looking for is just a boarder around some widgets. I don't want any scrolling inside the border (child area), it should just take whatever size it needs and cause its parent to scroll if necessary. Is there a way to do this?

Thanks,
Matthew

[ocornut]

Hello @dnotq,

Interestingly a few people haven't been trying to do the same thing. It's quite overkill to use a child window for that so I'd prefer if we had a better solution. I'll still investigate that changed with this assert.

I haven't thought it very much, but you may try something along the line of:

BeginGroup()
...
EndGroup
GetWindowDrawList()->AddRect(GetItemRectMin(), GetItemRectMin(), IM_COL32(...)) ?

I agree we could ideally have primitive to make that sort of things easier.

(Also linking #1395.)

[dnotq]

Thanks for the suggestion, I will try to use a group and then draw a rectangle (hopefully I can get rounded corners?)

I agree, using a child window just to get a border seemed like overkill to me too, but I did not see any other controls that offered a border around other content.

Just for reference, before I pulled the latest changes with the assert change I mentioned, using the negative value for the y coordinate gave the desired result (at least in the y axis, I would still like the x axis to shirk too):

However, specifying a -y value (other than -1) stopped working after I pulled, and if I specify (0,0) or (-1,-1), I now get this:

The first area always fills the parent and causes a scroll bar, the other child areas are squashed. I did search the issues here on github before posting and found several posts related to this, but nothing seemed to do what I was looking for. Also, I'm not sure what the ImGuiWindowFlags_AlwaysAutoResize flag is for since it never seemed to do what I expected (i.e. I'm not sure when I would use it, but it made no difference in this case if I passed it along with the call to BeginChild()).

This is for a server of sorts, and when a connection is made each area expands with additional details and other data. I would like the child area to always be fully expanded (never have scroll bars) and only the main parent window should ever scroll.

The functionality I'm after is very similar to the Collapsing Group, however add a border, and lose the title and the ability to close the group.

Matthew

[armadillu]

@dnotq did you find a good way? I'm also looking for some sort of auto-sized panels that enclose their contents in a box growing/shrinking dynamically; ideally with collapsible header too.

I'm trying the suggested aproach Begin/EndGroup() + AddRect(); and with some extra padding around the returned rectangle I can get a nice area; but I can't really add a background color to the panel; I can only draw on top of all the existing gui? Is there a way to reverse drawing order?

Maybe there's a way to "run" the layout part of what's inside the Begin/EndGroup() without actually drawing, just to get the final height beforehand? The problem is a lot of these panels offer different gui sliders / options depending on other panels / values in or out of the panel, so its quite hard to nail down the height without actually running all the imgui code.

Edit: Full GUI shot to get a sense of what I'm trying to do here; visually nesting these "panels" would be super useful.

[dnotq]

I don't remember what I ended up doing, it has been a while since I messed with that code. I think the group might have done the trick, but I'm not sure (I don't have access to that code right now). I seem to recall realizing that I did not need a full-blown child window. Sorry I can't me of more help.

Matthew

[sumeet]

i just discovering this now, with a similar need to @armadillu. i hacked around it by drawing twice, first to get the measurements, then blanking it out with a rectangle, then drawing over it again. not totally ideal but it works for me, so i thought i'd share if anyone found this thread looking to do the same thing 😃

[otse]

Hello @dnotq,

Interestingly a few people haven't been trying to do the same thing. It's quite overkill to use a child window for that so I'd prefer if we had a better solution. I'll still investigate that changed with this assert.

I haven't thought it very much, but you may try something along the line of:

BeginGroup()
...
EndGroup
GetWindowDrawList()->AddRect(GetItemRectMin(), GetItemRectMin(), IM_COL32(...)) ?

I agree we could ideally have primitive to make that sort of things easier.

(Also linking #1395.)

Could you fix this reply with GetItemRectMax()

[richardlalancette]

Well, I spend a fairly large amount of time on a similar issue.
I wanted to bunch up a few widgets into sections, but I wanted the frame background or another background.
None of the solution I have seen here work.

Best I could do is to put a white rectangle on top of the elements.

            ImGui::BeginGroup();
            ImGui::Text("Hello from another window!");
            ImGui::Text("Hello from another window!");
            ImGui::Text("Hello from another window!");
            ImGui::EndGroup();
            ImVec2 v = ImVec2(ImGui::GetItemRectMax().x * 1.5, ImGui::GetItemRectMax().y * 1.5);
            ImGui::GetForegroundDrawList()->AddRect(ImGui::GetItemRectMin(), ImGui::GetItemRectMax(), IM_COL32(255, 255, 255, 255));

            if (ImGui::CollapsingHeader("header", ImGuiTreeNodeFlags_DefaultOpen | ImGuiTreeNodeFlags_Framed))
            {
                ImGui::Text("Hello from another window!");
                ImGui::Text("Hello from another window!");
                ImGui::Text("Hello from another window!");
            }

Using the GetBackgroundDrawList() instead, showed to rectangles at all.

[thedmd]

Edit: Version without line trough text is here https://github.com/ocornut/imgui/issues/1496#issuecomment-655048353

My 3 cents:

    ImGui::BeginGroupPanel(ICON_MDI_GPU " Renderer", ImVec2(-1.0f, 0.0f));
    // m_RendererSelector->Draw(); boils down to:
    if (ImGui::BeginThinCombo("Backend:##Backend", currentBackendName.c_str(), ImGuiComboFlags_HeightLarge))
    {
        // ... few calls to: ImGui::Selectable(backendName.c_str(), isSelected)
        ImGui::EndThinCombo();
    }
    m_ResolutionSelector->Draw();
    ImGui::EndGroupPanel();

I end up with something I think looks decent enough and keep other widgets in bay.
Borders is drawn in the middle of the frame and frame is based on ImGui::GetFrameHeight(). Top has more spacing because of the group name.

void ImGui::BeginGroupPanel(const char* name, const ImVec2& size = ImVec2(-1.0f, -1.0f))
{
    ImGui::BeginGroup();

    auto cursorPos = ImGui::GetCursorScreenPos();
    auto itemSpacing = ImGui::GetStyle().ItemSpacing;
    ImGui::PushStyleVar(ImGuiStyleVar_FramePadding, ImVec2(0.0f, 0.0f));
    ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(0.0f, 0.0f));

    auto frameHeight = ImGui::GetFrameHeight();
    ImGui::BeginGroup();

    ImVec2 effectiveSize = size;
    if (size.x < 0.0f)
        effectiveSize.x = ImGui::GetContentRegionAvailWidth();
    else
        effectiveSize.x = size.x;
    ImGui::Dummy(ImVec2(effectiveSize.x, 0.0f));

    ImGui::Dummy(ImVec2(frameHeight * 0.5f, 0.0f));
    ImGui::SameLine(0.0f, 0.0f);
    ImGui::BeginGroup();
    ImGui::Dummy(ImVec2(frameHeight * 0.5f, 0.0f));
    ImGui::SameLine(0.0f, 0.0f);
    ImGui::TextUnformatted(name);
    ImGui::SameLine(0.0f, 0.0f);
    ImGui::Dummy(ImVec2(0.0, frameHeight + itemSpacing.y));
    ImGui::BeginGroup();

    ImGui::PopStyleVar(2);

    ImGui::GetCurrentWindow()->ContentsRegionRect.Max.x -= frameHeight * 0.5f;
    ImGui::GetCurrentWindow()->Size.x                   -= frameHeight;

    ImGui::PushItemWidth(effectiveSize.x - frameHeight);
}

void ImGui::EndGroupPanel()
{
    ImGui::PopItemWidth();

    auto itemSpacing = ImGui::GetStyle().ItemSpacing;

    ImGui::PushStyleVar(ImGuiStyleVar_FramePadding, ImVec2(0.0f, 0.0f));
    ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(0.0f, 0.0f));

    auto frameHeight = ImGui::GetFrameHeight();

    ImGui::EndGroup();

    //ImGui::GetWindowDrawList()->AddRectFilled(ImGui::GetItemRectMin(), ImGui::GetItemRectMax(), IM_COL32(0, 255, 0, 64), 4.0f);

    ImGui::EndGroup();

    ImGui::SameLine(0.0f, 0.0f);
    ImGui::Dummy(ImVec2(frameHeight * 0.5f, 0.0f));
    ImGui::Dummy(ImVec2(0.0, frameHeight - frameHeight * 0.5f - itemSpacing.y));

    ImGui::EndGroup();

    auto itemMin = ImGui::GetItemRectMin();
    auto itemMax = ImGui::GetItemRectMax();
    //ImGui::GetWindowDrawList()->AddRectFilled(itemMin, itemMax, IM_COL32(255, 0, 0, 64), 4.0f);

    ImVec2 halfFrame = ImVec2(frameHeight * 0.25f, frameHeight) * 0.5f;
    ImGui::GetWindowDrawList()->AddRect(
        itemMin + halfFrame, itemMax - ImVec2(halfFrame.x, 0.0f),
        ImColor(ImGui::GetStyleColorVec4(ImGuiCol_Border)),
        halfFrame.x);

    ImGui::PopStyleVar(2);

    ImGui::GetCurrentWindow()->ContentsRegionRect.Max.x += frameHeight * 0.5f;
    ImGui::GetCurrentWindow()->Size.x                   += frameHeight;

    ImGui::Dummy(ImVec2(0.0f, 0.0f));

    ImGui::EndGroup();
}

[richardlalancette]

You do have a background that looks decent!
Thanks a bunch! Will try that ASAP.

[richardlalancette]

The weird thing about this is that the collapsible header already supports all this correctly IMO.

[gamelaster]

I tried @thedmd solution, it looks fine, but the line is crossing the text (text needs background cover)

[thedmd]

Edit: Update to work with ImGui 1.14 WIP (17301)

@gamelaster I solved that:

void BeginGroupPanel(const char* name, const ImVec2& size = ImVec2(0.0f, 0.0f));
void EndGroupPanel();

#define IMGUI_DEFINE_MATH_OPERATORS
#include "imgui_internal.h"

static ImVector<ImRect> s_GroupPanelLabelStack;

void ImGui::BeginGroupPanel(const char* name, const ImVec2& size)
{
    ImGui::BeginGroup();

    auto cursorPos = ImGui::GetCursorScreenPos();
    auto itemSpacing = ImGui::GetStyle().ItemSpacing;
    ImGui::PushStyleVar(ImGuiStyleVar_FramePadding, ImVec2(0.0f, 0.0f));
    ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(0.0f, 0.0f));

    auto frameHeight = ImGui::GetFrameHeight();
    ImGui::BeginGroup();

    ImVec2 effectiveSize = size;
    if (size.x < 0.0f)
        effectiveSize.x = ImGui::GetContentRegionAvailWidth();
    else
        effectiveSize.x = size.x;
    ImGui::Dummy(ImVec2(effectiveSize.x, 0.0f));

    ImGui::Dummy(ImVec2(frameHeight * 0.5f, 0.0f));
    ImGui::SameLine(0.0f, 0.0f);
    ImGui::BeginGroup();
    ImGui::Dummy(ImVec2(frameHeight * 0.5f, 0.0f));
    ImGui::SameLine(0.0f, 0.0f);
    ImGui::TextUnformatted(name);
    auto labelMin = ImGui::GetItemRectMin();
    auto labelMax = ImGui::GetItemRectMax();
    ImGui::SameLine(0.0f, 0.0f);
    ImGui::Dummy(ImVec2(0.0, frameHeight + itemSpacing.y));
    ImGui::BeginGroup();

    //ImGui::GetWindowDrawList()->AddRect(labelMin, labelMax, IM_COL32(255, 0, 255, 255));

    ImGui::PopStyleVar(2);

#if IMGUI_VERSION_NUM >= 17301
    ImGui::GetCurrentWindow()->ContentRegionRect.Max.x -= frameHeight * 0.5f;
    ImGui::GetCurrentWindow()->WorkRect.Max.x          -= frameHeight * 0.5f;
    ImGui::GetCurrentWindow()->InnerRect.Max.x         -= frameHeight * 0.5f;
#else
    ImGui::GetCurrentWindow()->ContentsRegionRect.Max.x -= frameHeight * 0.5f;
#endif
    ImGui::GetCurrentWindow()->Size.x                   -= frameHeight;

    auto itemWidth = ImGui::CalcItemWidth();
    ImGui::PushItemWidth(ImMax(0.0f, itemWidth - frameHeight));

    s_GroupPanelLabelStack.push_back(ImRect(labelMin, labelMax));
}

void ImGui::EndGroupPanel()
{
    ImGui::PopItemWidth();

    auto itemSpacing = ImGui::GetStyle().ItemSpacing;

    ImGui::PushStyleVar(ImGuiStyleVar_FramePadding, ImVec2(0.0f, 0.0f));
    ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(0.0f, 0.0f));

    auto frameHeight = ImGui::GetFrameHeight();

    ImGui::EndGroup();

    //ImGui::GetWindowDrawList()->AddRectFilled(ImGui::GetItemRectMin(), ImGui::GetItemRectMax(), IM_COL32(0, 255, 0, 64), 4.0f);

    ImGui::EndGroup();

    ImGui::SameLine(0.0f, 0.0f);
    ImGui::Dummy(ImVec2(frameHeight * 0.5f, 0.0f));
    ImGui::Dummy(ImVec2(0.0, frameHeight - frameHeight * 0.5f - itemSpacing.y));

    ImGui::EndGroup();

    auto itemMin = ImGui::GetItemRectMin();
    auto itemMax = ImGui::GetItemRectMax();
    //ImGui::GetWindowDrawList()->AddRectFilled(itemMin, itemMax, IM_COL32(255, 0, 0, 64), 4.0f);

    auto labelRect = s_GroupPanelLabelStack.back();
    s_GroupPanelLabelStack.pop_back();

    ImVec2 halfFrame = ImVec2(frameHeight * 0.25f, frameHeight) * 0.5f;
    ImRect frameRect = ImRect(itemMin + halfFrame, itemMax - ImVec2(halfFrame.x, 0.0f));
    labelRect.Min.x -= itemSpacing.x;
    labelRect.Max.x += itemSpacing.x;
    for (int i = 0; i < 4; ++i)
    {
        switch (i)
        {
            // left half-plane
            case 0: ImGui::PushClipRect(ImVec2(-FLT_MAX, -FLT_MAX), ImVec2(labelRect.Min.x, FLT_MAX), true); break;
            // right half-plane
            case 1: ImGui::PushClipRect(ImVec2(labelRect.Max.x, -FLT_MAX), ImVec2(FLT_MAX, FLT_MAX), true); break;
            // top
            case 2: ImGui::PushClipRect(ImVec2(labelRect.Min.x, -FLT_MAX), ImVec2(labelRect.Max.x, labelRect.Min.y), true); break;
            // bottom
            case 3: ImGui::PushClipRect(ImVec2(labelRect.Min.x, labelRect.Max.y), ImVec2(labelRect.Max.x, FLT_MAX), true); break;
        }

        ImGui::GetWindowDrawList()->AddRect(
            frameRect.Min, frameRect.Max,
            ImColor(ImGui::GetStyleColorVec4(ImGuiCol_Border)),
            halfFrame.x);

        ImGui::PopClipRect();
    }

    ImGui::PopStyleVar(2);

#if IMGUI_VERSION_NUM >= 17301
    ImGui::GetCurrentWindow()->ContentRegionRect.Max.x += frameHeight * 0.5f;
    ImGui::GetCurrentWindow()->WorkRect.Max.x          += frameHeight * 0.5f;
    ImGui::GetCurrentWindow()->InnerRect.Max.x         += frameHeight * 0.5f;
#else
    ImGui::GetCurrentWindow()->ContentsRegionRect.Max.x += frameHeight * 0.5f;
#endif
    ImGui::GetCurrentWindow()->Size.x                   += frameHeight;

    ImGui::Dummy(ImVec2(0.0f, 0.0f));

    ImGui::EndGroup();
}

[PcChip]

I get several errors about "ContentsRegionRect" not being available - was this deprecated?
I'm really looking for this effect and would love to use the code provided by @thedmd , any ideas?

edit: looks like it was just a typo, I'm assuming he meant "ContentRegionRect"

edit2: it's mostly working, although it cuts off the text for "InputDouble" fields - https://i.imgur.com/4Gge2jY.png

edit3: fix seems to be SetNextItemWidth - https://i.imgur.com/fRFt4sE.png

I'll leave these edits up in case it helps the next person :)

[thedmd]

@PcChip I updated code to work with current ImGui