Selectable highlight overlaps Table border when ImGuiSelectableFlags_SpanAllColumns set #4678

New issue

Open

opened 2021-10-29 02:23:17 +00:00 by scottmcnab · 2 comments

scottmcnab commented

2021-10-29 02:23:17 +00:00

(Migrated from github.com)

Version/Branch of Dear ImGui:

Version: 1.86 WIP
Branch: docking - commit bac748fa95

Dear ImGui 1.86 WIP (18502)
--------------------------------
sizeof(size_t): 4, sizeof(ImDrawIdx): 2, sizeof(ImDrawVert): 20
define: __cplusplus=199711
define: _WIN32
define: _MSC_VER=1929
define: _MSVC_LANG=201402
define: IMGUI_HAS_VIEWPORT
define: IMGUI_HAS_DOCK
--------------------------------
io.BackendPlatformName: imgui_impl_win32
io.BackendRendererName: imgui_impl_dx12
io.ConfigFlags: 0x00000441
 NavEnableKeyboard
 DockingEnable
 ViewportsEnable
io.ConfigViewportsNoDecoration
io.ConfigInputTextCursorBlink
io.ConfigWindowsResizeFromEdges
io.ConfigMemoryCompactTimer = 60.0
io.BackendFlags: 0x00001C0E
 HasMouseCursors
 HasSetMousePos
 PlatformHasViewports
 HasMouseHoveredViewport
 RendererHasVtxOffset
 RendererHasViewports
--------------------------------
io.Fonts: 1 fonts, Flags: 0x00000000, TexSize: 512,64
io.DisplaySize: 1264.00,761.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

Back-end/Renderer/Compiler/OS

Back-ends: imgui_impl_directx12.cpp + imgui_impl_win32.cpp
Compiler: Visual Studio 2019 16.11.5
Operating System: Windows

My Issue/Question:

When ImGui::Selectable() is used inside a table with the ImGuiSelectableFlags_SpanAllColumns flag set, the selectable highlight is incorrectly drawn overlapping the table border pixel.

If ImGuiSelectableFlags_SpanAllColumns is not used, then the border is not overdrawn, however the highlight no longer spans all columns.

Note: the ImGuiSelectableFlags_SpanAllColumns highlight also overlaps the right-hand table border pixel too if the scrollbar is not present (confirmed after the screenshots below were captured).

Is it possible to fix this so ImGuiSelectableFlags_SpanAllColumns can be used without overlapping the table border?
Thanks

Screenshots/Video

Standalone, minimal, complete and verifiable example:

    const ImGuiTableFlags table_flags = ImGuiTableFlags_SizingFixedFit | ImGuiTableFlags_ScrollY | ImGuiTableFlags_RowBg | ImGuiTableFlags_BordersOuter | ImGuiTableFlags_Sortable;
    if (ImGui::TreeNode("Bad Selectable Highlight"))
    {
        if (ImGui::BeginTable("##1", 4, table_flags, ImVec2(0.0f, 100)))
        {
            ImGui::TableSetupScrollFreeze(0, 1);
            ImGui::TableSetupColumn("A", ImGuiTableColumnFlags_WidthFixed, 100);
            ImGui::TableSetupColumn("B", ImGuiTableColumnFlags_WidthFixed, 100);
            ImGui::TableSetupColumn("C", ImGuiTableColumnFlags_WidthFixed, 100);
            ImGui::TableHeadersRow();

            int count = 0;
            for (auto i = 0; i < 5; ++i)
            {
                ImGui::TableNextRow();
                for (auto j = 0; j < 3; ++j)
                {
                    ImGui::TableSetColumnIndex(j);

                    auto text = std::to_string(count++);
                    if (j == 0)
                        ImGui::Selectable(text.c_str(), false, ImGuiSelectableFlags_SpanAllColumns);
                    else
                        ImGui::Text(text.c_str());
                }
            }
            ImGui::EndTable();
        }
        ImGui::TreePop();
    }
    if (ImGui::TreeNode("Good Selectable Highlight"))
    {
        if (ImGui::BeginTable("##2", 4, table_flags, ImVec2(0.0f, 100)))
        {
            ImGui::TableSetupScrollFreeze(0, 1);
            ImGui::TableSetupColumn("A", ImGuiTableColumnFlags_WidthFixed, 100);
            ImGui::TableSetupColumn("B", ImGuiTableColumnFlags_WidthFixed, 100);
            ImGui::TableSetupColumn("C", ImGuiTableColumnFlags_WidthFixed, 100);
            ImGui::TableHeadersRow();

            int count = 0;
            for (auto i = 0; i < 5; ++i)
            {
                ImGui::TableNextRow();
                for (auto j = 0; j < 3; ++j)
                {
                    ImGui::TableSetColumnIndex(j);

                    auto text = std::to_string(count++);
                    if (j == 0)
                        ImGui::Selectable(text.c_str(), false, ImGuiSelectableFlags_None);
                    else
                        ImGui::Text(text.c_str());
                }
            }
            ImGui::EndTable();
        }

        ImGui::TreePop();
    }

**Version/Branch of Dear ImGui:** Version: 1.86 WIP Branch: docking - commit bac748fa95ac003c7b354139980f8b4b7f6ac5da ``` Dear ImGui 1.86 WIP (18502) -------------------------------- sizeof(size_t): 4, sizeof(ImDrawIdx): 2, sizeof(ImDrawVert): 20 define: __cplusplus=199711 define: _WIN32 define: _MSC_VER=1929 define: _MSVC_LANG=201402 define: IMGUI_HAS_VIEWPORT define: IMGUI_HAS_DOCK -------------------------------- io.BackendPlatformName: imgui_impl_win32 io.BackendRendererName: imgui_impl_dx12 io.ConfigFlags: 0x00000441 NavEnableKeyboard DockingEnable ViewportsEnable io.ConfigViewportsNoDecoration io.ConfigInputTextCursorBlink io.ConfigWindowsResizeFromEdges io.ConfigMemoryCompactTimer = 60.0 io.BackendFlags: 0x00001C0E HasMouseCursors HasSetMousePos PlatformHasViewports HasMouseHoveredViewport RendererHasVtxOffset RendererHasViewports -------------------------------- io.Fonts: 1 fonts, Flags: 0x00000000, TexSize: 512,64 io.DisplaySize: 1264.00,761.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 ``` **Back-end/Renderer/Compiler/OS** Back-ends: imgui_impl_directx12.cpp + imgui_impl_win32.cpp Compiler: Visual Studio 2019 16.11.5 Operating System: Windows **My Issue/Question:** When `ImGui::Selectable()` is used inside a table with the `ImGuiSelectableFlags_SpanAllColumns` flag set, the selectable highlight is incorrectly drawn overlapping the table border pixel. If `ImGuiSelectableFlags_SpanAllColumns` is not used, then the border is not overdrawn, however the highlight no longer spans all columns. Note: the `ImGuiSelectableFlags_SpanAllColumns` highlight also overlaps the right-hand table border pixel too if the scrollbar is not present (confirmed after the screenshots below were captured). Is it possible to fix this so `ImGuiSelectableFlags_SpanAllColumns` can be used without overlapping the table border? Thanks **Screenshots/Video** ![bad selectable highlight](https://user-images.githubusercontent.com/7407015/139362482-4fde14f2-2eb4-493b-8408-c699f2cd6d9d.jpg) ![good selectable highlight](https://user-images.githubusercontent.com/7407015/139362484-ec31ac00-a0dc-47f4-bfcf-c9bb5b85f0b0.jpg) **Standalone, minimal, complete and verifiable example:** ``` const ImGuiTableFlags table_flags = ImGuiTableFlags_SizingFixedFit | ImGuiTableFlags_ScrollY | ImGuiTableFlags_RowBg | ImGuiTableFlags_BordersOuter | ImGuiTableFlags_Sortable; if (ImGui::TreeNode("Bad Selectable Highlight")) { if (ImGui::BeginTable("##1", 4, table_flags, ImVec2(0.0f, 100))) { ImGui::TableSetupScrollFreeze(0, 1); ImGui::TableSetupColumn("A", ImGuiTableColumnFlags_WidthFixed, 100); ImGui::TableSetupColumn("B", ImGuiTableColumnFlags_WidthFixed, 100); ImGui::TableSetupColumn("C", ImGuiTableColumnFlags_WidthFixed, 100); ImGui::TableHeadersRow(); int count = 0; for (auto i = 0; i < 5; ++i) { ImGui::TableNextRow(); for (auto j = 0; j < 3; ++j) { ImGui::TableSetColumnIndex(j); auto text = std::to_string(count++); if (j == 0) ImGui::Selectable(text.c_str(), false, ImGuiSelectableFlags_SpanAllColumns); else ImGui::Text(text.c_str()); } } ImGui::EndTable(); } ImGui::TreePop(); } if (ImGui::TreeNode("Good Selectable Highlight")) { if (ImGui::BeginTable("##2", 4, table_flags, ImVec2(0.0f, 100))) { ImGui::TableSetupScrollFreeze(0, 1); ImGui::TableSetupColumn("A", ImGuiTableColumnFlags_WidthFixed, 100); ImGui::TableSetupColumn("B", ImGuiTableColumnFlags_WidthFixed, 100); ImGui::TableSetupColumn("C", ImGuiTableColumnFlags_WidthFixed, 100); ImGui::TableHeadersRow(); int count = 0; for (auto i = 0; i < 5; ++i) { ImGui::TableNextRow(); for (auto j = 0; j < 3; ++j) { ImGui::TableSetColumnIndex(j); auto text = std::to_string(count++); if (j == 0) ImGui::Selectable(text.c_str(), false, ImGuiSelectableFlags_None); else ImGui::Text(text.c_str()); } } ImGui::EndTable(); } ImGui::TreePop(); } ```

ocornut commented

2021-10-30 15:16:57 +00:00

(Migrated from github.com)

What exactly is your issue in your context? How/why have you noticed that? What colors and style are you using?

Overlapping the border in that instance is generally desirable at the border color may use e.g. a small alpha value. Likewise, when two cells are meant to be contiguously selected a hole between two cells wouldn't be desirable. What exactly is your issue in your context? How/why have you noticed that? What colors and style are you using?

scottmcnab commented

2021-11-01 01:19:12 +00:00

(Migrated from github.com)

@ocornut Overlapping the outer boarder really disrupts the visual continuity of the GUI. I agree that the highlight should overlap the border between columns, but I don't think it should overlap the external table border.

Here is a screenshot from the actual application:

You can see how the highlight breaks the frame around the table.

I'm not sure the best way to fix this? Is it possible to shrink the SpanAllColumns highlight horizontally by 1 pixel for the first and last columns?

@ocornut Overlapping the outer boarder really disrupts the visual continuity of the GUI. I agree that the highlight should overlap the border _between_ columns, but I don't think it should overlap the external table border. Here is a screenshot from the actual application: ![highlight example](https://user-images.githubusercontent.com/7407015/139608519-4c1c472f-18ff-4362-98d5-bf26c20668b4.jpg) You can see how the highlight breaks the frame around the table. I'm not sure the best way to fix this? Is it possible to shrink the SpanAllColumns highlight horizontally by 1 pixel for the first and last columns?