Multicomponent widgets don't resize smoothly (`PushMultiItemsWidths`) #7120

New issue

Closed

opened 2023-12-11 21:53:49 +00:00 by Nahor · 0 comments

Nahor commented

2023-12-11 21:53:49 +00:00

(Migrated from github.com)

Version/Branch of Dear ImGui:

Version: v1.90

My Issue/Question:

With 3+ components, the way PushMultiItemsWidths computes the width causes some "wave" when resizing a window. The more components there are, the more noticeable the effect.

The issue is that that the width of most components is set to the same value with the last component taking what's left. So in some cases, when the size of the whole widget is changed by one pixel, it can cause that common width to change by one pixel as well. This gets multiplied by the number of component-1. So the last component width will change by component-2 pixels in the other direction

Another issue is that components in one widget don't always align with components in another (see the video, where every component of the 4-component widget should align with every 5th component in the 20-component widget)

Screenshots/Video
In the video, note how the last component sometimes grows (resp. shrinks) as a reduce (resp. expand) the size of the window

https://github.com/ocornut/imgui/assets/1198364/420ab023-ee36-48db-818f-d6844641e99e

The "Original" section is how the ImGui code currently works. The "Fixed" is with a corrected version of the algorithm.

Standalone, minimal, complete and verifiable example:

int components = 20;
ImGui::PushMultiItemsWidths(components, ImGui::CalcItemWidth());
ImGui::PushID("Test");
for (int i = 0; i < components; i++) {
    char buf[10] = {};
    if (i != 0) {
        ImGui::SameLine(0, ImGui::GetCurrentContext()->Style.ItemInnerSpacing.x);
    }
    ImGui::PushID(i);
    ImGui::InputText("", buf, IM_ARRAYSIZE(buf));
    ImGui::PopItemWidth();
    ImGui::PopID();
}
ImGui::PopID();

**Version/Branch of Dear ImGui:** Version: v1.90 **My Issue/Question:** With 3+ components, the way `PushMultiItemsWidths` computes the width causes some "wave" when resizing a window. The more components there are, the more noticeable the effect. The issue is that that the width of most components is set to the same value with the last component taking what's left. So in some cases, when the size of the whole widget is changed by one pixel, it can cause that common width to change by one pixel as well. This gets multiplied by the number of component-1. So **the last component width will change by component-2 pixels in the other direction** Another issue is that components in one widget don't always align with components in another (see the video, where every component of the 4-component widget should align with every 5th component in the 20-component widget) **Screenshots/Video** In the video, note how the last component sometimes grows (resp. shrinks) as a reduce (resp. expand) the size of the window https://github.com/ocornut/imgui/assets/1198364/420ab023-ee36-48db-818f-d6844641e99e The "Original" section is how the ImGui code currently works. The "Fixed" is with a corrected version of the algorithm. **Standalone, minimal, complete and verifiable example:** ```C++ int components = 20; ImGui::PushMultiItemsWidths(components, ImGui::CalcItemWidth()); ImGui::PushID("Test"); for (int i = 0; i < components; i++) { char buf[10] = {}; if (i != 0) { ImGui::SameLine(0, ImGui::GetCurrentContext()->Style.ItemInnerSpacing.x); } ImGui::PushID(i); ImGui::InputText("", buf, IM_ARRAYSIZE(buf)); ImGui::PopItemWidth(); ImGui::PopID(); } ImGui::PopID(); ```