Combo jitters inside Table when _SizingStretchProp is set

rayment commented 7 months ago

Version/Branch of Dear ImGui:

1.90.4 (master)

Back-ends:

imgui_impl_sdl2.cpp + imgui_impl_opengl3.cpp

Compiler, OS:

Linux 6.1.67-gentoo-x86_64 #1 SMP PREEMPT_DYNAMIC + gcc version 13.2.1 20240210 + KDE 5.115.0

Full config/build information:

Dear ImGui 1.90.4 (19040)
--------------------------------
sizeof(size_t): 8, sizeof(ImDrawIdx): 2, sizeof(ImDrawVert): 20
define: __cplusplus=201703
define: __linux__
define: __GNUC__=13
--------------------------------
io.BackendPlatformName: imgui_impl_sdl2
io.BackendRendererName: imgui_impl_opengl3
io.ConfigFlags: 0x00000001
 NavEnableKeyboard
io.ConfigInputTextCursorBlink
io.ConfigWindowsResizeFromEdges
io.ConfigMemoryCompactTimer = 60.0
io.BackendFlags: 0x0000000E
 HasMouseCursors
 HasSetMousePos
 RendererHasVtxOffset
--------------------------------
io.Fonts: 1 fonts, Flags: 0x00000000, TexSize: 512,64
io.DisplaySize: 1280.00,720.00
io.DisplayFramebufferScale: 1.00,1.00
--------------------------------
style.WindowPadding: 8.00,8.00
style.WindowBorderSize: 1.00
style.FramePadding: 4.00,3.00
style.FrameRounding: 0.00
style.FrameBorderSize: 0.00
style.ItemSpacing: 8.00,4.00
style.ItemInnerSpacing: 4.00,4.00

Details:

My Issue/Question:

I'm building out a GUI with a nested TabBar > TabItem > Child > Table and noticed that as soon as I started using ImGuiTableFlags_SizingStretchProp to nicely separate my left text column from my right content column and stretch it, any time I was using a Combo in one of my tabs, the entire column would start to jitter when I resize the window.

I have reduced this to an MCVE and I believe it is easily viewable in the attached video.

You will see that when the containing window is resized, if the column contains a Combo, it will jitter back and forth from the leftmost/start of X point.

If it has anything to do with my platform, I will have you know the following:

I'm on a 60Hz monitor.
I'm running KDE 5.115.0 on a Gentoo environment.
I'm using the SDL2/OpenGL backends with setup code copy/pasted verbatim from your init example.

It's late here now - I might test this tomorrow on my 165Hz monitor running Windows 10 to check if it's a cross-platform issue.

I've tested this with Buttons and Text and am not seeing the same issue arise with them.

Screenshots/Video:

https://github.com/ocornut/imgui/assets/75439366/dcf05a8b-0951-44b2-a2b2-e21aa89f70b5

Minimal, Complete and Verifiable Example code:

This is the code used in the video above.

ImGui::Begin("window");
    ImGui::BeginTable("table_broken", 2, ImGuiTableFlags_SizingStretchProp);
        ImGui::TableNextRow();
        ImGui::TableSetColumnIndex(0);
        ImGui::Text("broken");
        ImGui::TableSetColumnIndex(1);
        if (ImGui::BeginCombo("##combo", "this table jitters"))
            ImGui::EndCombo();
        ImGui::TableNextRow();
        ImGui::TableSetColumnIndex(1);
        ImGui::SetNextItemWidth(ImGui::GetContentRegionAvail().x);
        if (ImGui::BeginCombo("##combo", "so does this combo"))
            ImGui::EndCombo();
    ImGui::EndTable();
    ImGui::BeginTable("table_working", 2, ImGuiTableFlags_SizingStretchProp);
        ImGui::TableNextRow();
        ImGui::TableSetColumnIndex(0);
        ImGui::Text("working");
        ImGui::TableSetColumnIndex(1);
        ImGui::Text("but this table is fine");
    ImGui::EndTable();
ImGui::End();

Though please take the word 'broken' very lightly - ImGui is a wonderful piece of software and it's certainly better than anything I could ever release.

ocornut commented 7 months ago

You have a feedback loop using “ imgui::SetNextItemWidth(ImGui::GetContentRegionAvail().x);” which uses the column width for the framed part of the combo, and the column itself measuring its contents to set its width proportional to contents to both columns. Unfortunately one of those parameters would need to be altered.

rayment commented 7 months ago

Hi Omar, thanks for getting back to me. What you say makes perfect sense, though unfortunately this issue occurs even without the second row with SetNextItemWidth.

ImGui::Begin("window");
    ImGui::BeginTable("table_broken", 2, ImGuiTableFlags_SizingStretchProp);
        ImGui::TableNextRow();
        ImGui::TableSetColumnIndex(0);
        ImGui::Text("broken");
        ImGui::TableSetColumnIndex(1);
        if (ImGui::BeginCombo("##combo", "this table jitters"))
            ImGui::EndCombo();
    ImGui::EndTable();
    ImGui::BeginTable("table_working", 2, ImGuiTableFlags_SizingStretchProp);
        ImGui::TableNextRow();
        ImGui::TableSetColumnIndex(0);
        ImGui::Text("working");
        ImGui::TableSetColumnIndex(1);
        ImGui::Text("but this table is fine");
    ImGui::EndTable();
ImGui::End();

This is the same code as above, just without the second row. I get the following happening:

https://github.com/ocornut/imgui/assets/75439366/b44a7960-1cf5-421b-81bf-e854844a6877

It's happening to a lesser extent, but it's particularly noticeable when the width is increased.

rayment commented 7 months ago

Actually it's pretty noticeable when I extend the window further:

The right extent of the Combo moves smoothly, it's entirely the left extent that is shifting every 2nd or so frame, resulting in the jittering effect.

https://github.com/ocornut/imgui/assets/75439366/8129644c-96cd-42c4-9ea7-b68574f6cad5

rayment commented 7 months ago

I can confirm it happens on Windows as well. On my 165Hz monitor it's a lot smoother but it still happens.

https://github.com/ocornut/imgui/assets/75439366/24c91320-d854-4d3d-a7f5-a4ebbae65d99

ocornut / imgui