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()

[rlalance]

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::GetContentRegionAvail().x;
    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();

    // workaround for incorrect capture of columns/table width by placing
    // zero-sized dummy element in the same group, this ensure
    // max X cursor position is updated correctly
    ImGui::SameLine(0.0f, 0.0f);
    ImGui::Dummy(ImVec2(0.0f, 0.0f));

    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();
}

[rlalance]

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

[rlalance]

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

[GasimGasimzada]

Hello, I have been trying to get this this working using Begin/EndGroup and adding Filled Rectangle using DrawList API. Because I am using filled rectangle, the Rect gets drawn on top of the content. Is there a way to change it below the content?

ImGui::BeginGroup();
  if (ImGui::CollapsingHeader("Test")) {
      ImGui::Text("Hello world");
      ImGui::Text("Hello world");
      ImGui::Text("Hello world");
      ImGui::Text("Hello world");
      ImGui::Text("Hello world");
      ImGui::Text("Hello world");
  }
ImGui::EndGroup();

float windowWidth = ImGui::GetContentRegionAvail().x;
auto panelMin = ImGui::GetItemRectMin();
auto panelMax = ImVec2(panelMin.x + windowWidth, ImGui::GetItemRectMax().y);
ImGui::GetWindowDrawList()->AddRectFilled(panelMin, panelMax,
                                          ImColor(255, 255, 0, 255), 2.0f);

Screenshot (Text is below the Rect):

I solved it by separating the draw list channels into two parts and writing the rectangle to channel 0:

ImGui::GetWindowDrawList()->ChannelsSplit(2);
ImGui::GetWindowDrawList()->ChannelsSetCurrent(1);
ImGui::BeginGroup();
...
ImGui::EndGroup();

// Draw below
ImGui::GetWindowDrawList()->ChannelsSetCurrent(0);
float windowWidth = ImGui::GetContentRegionAvail().x;
auto panelMin = ImGui::GetItemRectMin();
auto panelMax = ImVec2(panelMin.x + windowWidth, ImGui::GetItemRectMax().y);
ImGui::GetWindowDrawList()->AddRectFilled(panelMin, panelMax,
                                          ImColor(255, 255, 0, 255), 2.0f);

[GasimGasimzada]

After playing around with this API for my use-case, I do not think adding rectangle is the way to go. I need to support two things

• Adding padding around the content
• Adding maximum height that stops growing the box and adds scrollbars

Instead of reinventing the wheel here, I want to create a widget based on child windows that autogrows to content instead of autogrowing to parent. So, I wrote a logic that calculates the height based on group and sets the window size using ImGui::SetWindowSize. By debugging, I can see that the height is correct inside ImGui::EndChild; however, the height of the window does not change. Here is the code that I got:

// Setting the height value to disable the auto align axis
ImGui::BeginChild("test child", ImVec2(0.0, 10.0f), true); 

ImGui::BeginGroup();
ImGui::Text("Hello world");
ImGui::Text("Hello world");
ImGui::Text("Hello world");
ImGui::Text("Hello world");
ImGui::EndChild();

auto groupHeight = = ImGui::GetItemRectMax().y - ImGui::GetItemRectMin().y;
// Make sure to autogrow the width component
ImGui::SetWindowSize(ImVec2(0.0f, groupHeight));

// Testing with a fixed value but window size does not change
// ImGui::SetWindowSize(ImVec2(0.0f, 50.0f));

ImGui::EndChild();

Is this not possible to resize the child window while rendering the contents of it? (similar to resizing a normal window).

---

EDIT: After trying with both windows and groups + draw list API, and for the time being I went with the groups + draw list API for no reason other than it was faster to implemen this:

static XBounds calculateSectionBoundsX(float padding) {
  auto *window = ImGui::GetCurrentWindow();
  float windowStart = ImGui::GetWindowPos().x;

  return {windowStart + window->WindowPadding.x + padding,
          windowStart + ImGui::GetWindowWidth() - window->WindowPadding.x -
              padding};
}

bool beginSection(const char *title) {
  ImGui::GetWindowDrawList()->ChannelsSplit(2);

  // Draw content above the rectangle
  ImGui::GetWindowDrawList()->ChannelsSetCurrent(1);

  auto padding = ImGui::GetStyle().WindowPadding;

  auto *window = ImGui::GetCurrentWindow();
  float windowWidth = ImGui::GetWindowWidth();

  auto boundsX = calculateSectionBoundsX(padding.x);

  // Title will be clipped till the middle
  // because I am going to have a collapsing
  // header there
  const float midPoint = boundsX.start + (boundsX.end - boundsX.start) / 2.0f;

  // Start from padding position
  ImGui::SetCursorPosY(ImGui::GetCursorPosY() + padding.y);
  ImGui::BeginGroup();
  if (padding.x > 0) {
    ImGui::Indent(padding.x);
  }

  ImGui::PushClipRect(ImVec2(boundsX.start, window->ClipRect.Min.y),
                      ImVec2(midPoint, window->ClipRect.Max.y), false);
  ImGui::Text("%s", title);
  ImGui::PopClipRect();

  // Setting clip rectangle for the group contents;
  // so, that text does not overflow outside this widget
  // the parent window is resized
  ImGui::PushClipRect(ImVec2(boundsX.start, window->ClipRect.Min.y),
                      ImVec2(boundsX.end, window->ClipRect.Max.y), false);

  return true;
}

void endSection() {
  auto padding = ImGui::GetStyle().WindowPadding;

  ImGui::PopClipRect();
  if (padding.x > 0) {
    ImGui::Unindent(padding.x);
  }
  ImGui::EndGroup();

  // Essentially, the content is drawn with padding
  // while the rectangle is drawn without padding
  auto boundsX = calculateSectionBoundsX(0.0f);

  // GetItemRectMin is going to include the padding
  // as well; so, remove it
  auto panelMin = ImVec2(boundsX.start, ImGui::GetItemRectMin().y - padding.y);
  auto panelMax = ImVec2(boundsX.end, ImGui::GetItemRectMax().y + padding.y);

  // Draw rectangle below
  ImGui::GetWindowDrawList()->ChannelsSetCurrent(0);
  ImGui::GetWindowDrawList()->AddRectFilled(
      panelMin, panelMax,
      ImGui::GetColorU32(ImGui::GetStyleColorVec4(ImGuiCol_ChildBg)),
      Theme::getStyle(ThemeStyle::SectionRounding).x);
  ImGui::GetWindowDrawList()->ChannelsMerge();

  // Since rectangle is bigger than the box, move the cursor;
  // so, it starts outside the box
  ImGui::SetCursorPosY(ImGui::GetCursorPosY() + padding.y);

  // Then, add default spacing
  ImGui::Spacing();
}

The only thing that I want to figure out for this is to add scrolling and allow providing a maximum height. One caveat of this approach is that, I cannot nest this widget within itself because the width is always calculated according to the window, not parent widget; however it is something that does not bother me at the moment.

[TheGondos]

@thedmd : thanks for the solution, it's a perfect fit and begs to be copy/pasted ; however it is not clear to me what license applies to code posted in here since it's not part of a PR (I'm assuming the CLA applies to PRs, but not code posted inside issues). Could you clarify the licensing for this code ? Thanks

[thedmd]

It is free to use. I put it in public domain.

You can apply any license you wish after making your own copy. If necessary, this can treated also as permission to do exactly that.

Does this solve your problem?

[TheGondos]

It is free to use. I put it in public domain.

You can apply any license you wish after making your own copy. If necessary, this can treated also as permission to do exactly that.

Does this solve your problem?

Yes, thank you very much :-)

[ocornut]

It is now possible to

• manually resize child windows (on either axis) (#1710) with ImGuiChildFlags_ResizeX, ImGuiChildFlags_ResizeY.
• make child windows auto-fit (on either axis) (#1666) with ImGuiChildFlags_AutoResizeX, ImGuiChildFlags_AutoResizeY.

There are various subtleties related to specifies of child windows. Also added ImGuiChildFlags_FrameStyle to replace BeginChildFrame(), which ties to the ideas discussed in this thread.

However, I am not closing this thread because this mostly discuss decorating a group of widgets without scrolling, which I think should be achieved much more optimally using groups and a potential new PushWorkRect() API I would like to move on. I understand that in the meanwhile people have been using child windows for this purpose but please be considerate they are full windows with non-negligible general however. Every post in this thread using BeginChild() could be using BeginGroup() instead. I will work toward making this more obvious and more easy.

[Nukoooo]

Although it is probably nothing special/new, for anyone that is using v1.90 or newer and wants to decorate the group with @thedmd's solution but also wants to auto resize Y axis, you can make the following changes: In BeginGroupPanel:

 TextUnformatted(name);
 auto labelMin = GetItemRectMin();
 auto labelMax = GetItemRectMax();
 SameLine(0.0f, 0.0f);
 Dummy(ImVec2(0.0, frameHeight + itemSpacing.y));
-BeginGroup();
+BeginChild(fmt::format("{}##child", name).c_str(), ImVec2(effectiveSize.x - GetStyle().ScrollbarSize, size.y), ImGuiChildFlags_AutoResizeY);

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

In EndGroupPanel:

 PushStyleVar(ImGuiStyleVar_FramePadding, ImVec2(0.0f, 4.0f));
 PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(0.0f, 0.0f));

 auto frameHeight = GetFrameHeight();

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

With these changes, however, you have to specify the size of a group, otherwise it will just display a really small rectangle. Hopefully this can save someone's time :)

[alien-brother]

What's the current recommendation for drawing border and background for a group of items?

• Here there, a solution using an ImDrawListSplitter https://github.com/ocornut/imgui/issues/5944, which I didn't try, but it seems that ImDrawListSplitter was meant for stuff like this.
• Alternatively, I can first draw the border and background using the bounding box from the previous frame, then place the items, then update the bounding box with ImGui::GetItemRectMin/Max(). An advantage of remembering the previous bounding box is that a group box like this can be collapsed into just a header that has width or height of the last seen content.

[Langwedocjusz]

@thedmd I've encountered a very subtle problem using your Begin/EndGroupPanel functions. The minimal code to reproduce this would be:

ImGui::DockSpaceOverViewport(ImGui::GetMainViewport());

ImGui::Begin("Test1");

BeginGroupPanel("Some things");

ImGui::Columns(2);
ImGui::Text("Thing 1");
ImGui::NextColumn();
ImGui::Text("Thing 2");
ImGui::NextColumn();
ImGui::Columns();

EndGroupPanel();

ImGui::End();

ImGui::Begin("Test2");

ImGui::End();

If you dock both windows together, for example like this:

It causes a debug assertion to fail on subsequent opening of the application, with "imgui.ini" generated, producing the following output:

.../imgui_draw.cpp:450: void ImDrawList::AddDrawCmd(): Assertion `draw_cmd.ClipRect.x <= draw_cmd.ClipRect.z && draw_cmd.ClipRect.y <= draw_cmd.ClipRect.w' failed.

In release build everything works as expected, so it seems there are no side effects besides triggering this assertion.

[BenjaminVermorel]

@thedmd Looks like i got the same issue as you have. When using ImGui::Columns(7, "Columns"); SetColumnWidth(70) => SetColumnOffset on an empty window, columns->OffMaxX = 3 With 7 columns, i get an offset = -33, which seems to break the whole thing

[thedmd]

@Langwedocjusz , @BenjaminVermorel I did update snippet to make it work with columns and tables. https://github.com/ocornut/imgui/issues/1496#issuecomment-569892444

[BenjaminVermorel]

@Langwedocjusz , @BenjaminVermorel I did update snippet to make it work with columns and tables. #1496 (comment)

Hey! Thanks for the update. Sadly, i don't really get how to apply the snippet to the columns case.

i'm doing:

ImGui::Columns(7, "Columns"); ImGui::SetColumnWidth(0, ButtonSizePad.x); XXX ImGui::NextColumn(); ImGui::SetColumnWidth(1, ButtonSizePad.x); XXX ImGui::NextColumn();

Assert/problem comes on the last NextColumn(). I tried putting the dummy before the columns(7), but it doesn't seem to fix the problem. Would you know how to workaround in this case? Thank you very much in advance.