Right-aligned items are clipped in MenuBar when host window uses horizontal scrolling

[DimaKoltun]

Version/Branch of Dear ImGui:

Version: 1.88 WIP Branch: docking

Back-end/Renderer/Compiler/OS

Back-ends: imgui_impl_SDL.cpp + imgui_impl_opengl3.cpp Compiler: MSVC Operating System: Windows 10

My Issue/Question: MenuBar is clipped if it uses a table and window has menu bar and horizontal scrollbar.

Screenshots/Video https://github.com/ocornut/imgui/assets/83829508/7febecbb-bd3c-461d-ac35-54709f52daea

Standalone, minimal, complete and verifiable example: (see https://github.com/ocornut/imgui/issues/2261)

        ImGui::Begin("Test", nullptr, ImGuiWindowFlags_MenuBar | ImGuiWindowFlags_HorizontalScrollbar);

        if (ImGui::BeginMenuBar())
        {
            if (ImGui::BeginTable("##layout", 1))
            {
                ImGui::TableNextRow();
                ImGui::TableNextColumn();

                ImGui::Text("Long-long-long-long text");

                ImGui::EndTable();
            }

            ImGui::EndMenuBar();
       }

        if (ImGui::Button("big button", ImVec2(500.f, 500.f)))
        {

        }

        ImGui::End();

[ocornut]

Err, I have never considered the possibility of using a table inside the menu bar. What are you trying to achieve with it ?

[DimaKoltun]

Err, I have never considered the possibility of using a table inside the menu bar. What are you trying to achieve with it ?

I want to make my own layout, some menus stay on the left of the menu bar, some on the right

[DimaKoltun]

The menu bar used in the viewport and I can fix this bug by using a window that has a menu bar and a child viewport but I don't want to do that because in this case pressing escape will cause the viewport to lose focus.

[ocornut]

It's not a Table specific issue. Using -FLT_MIN or -1.0f to right-align uses the contents region (= rectangle available without scrolling). It's necessary as otherwise they would be a feedback loop.

Consider this:

ImGui::Begin("Test", nullptr, ImGuiWindowFlags_MenuBar | ImGuiWindowFlags_HorizontalScrollbar);
if (ImGui::BeginMenuBar())
{
    ImGui::Button("Test1", ImVec2(-FLT_MIN, 0.0f));
    ImGui::EndMenuBar();
}

ImGui::Button("Test2", ImVec2(-FLT_MIN, 0.0f));
if (ImGui::Button("big button", ImVec2(500.f, 500.f)))
{
}
ImGui::End();

Notice it happens even in the Test2 button which is NOT in the menu-bar.

You can visualize this by displaying the value of GetContentRegionAvail().x:

ImGui::Begin("Test", nullptr, ImGuiWindowFlags_MenuBar | ImGuiWindowFlags_HorizontalScrollbar);
if (ImGui::BeginMenuBar())
{
    ImGui::Text("%f", ImGui::GetContentRegionAvail().x);
    ImGui::EndMenuBar();
}
...
ImGui::End();

When you start scrolling the value decrease.

We cannot easy fix this for the main-scrolling layer, but in the case of the menu-bar, since it is in the special "non-scrolling" menu layer, we could argue that we should modify the contents region rectangle and it can be fixed.

[DimaKoltun]

can i fix it somehow, or we should consider good solution?

[ocornut]

I have the correct solution in mind (and have confirmed a few things just now) but it requires work and I can't focus on this right now. In addition even if you manually position items on the right you will currently encounter an issue that emitted item will account in contents size for region. So there's no good solution with horizontal scrollbar until I fix some things.

[ocornut]

I have pushed a first fix fa2e571 This solve the issue where submitting items inside a menu-bar would impact the contents the main layer when scrolling.

In other words, if you submitted a 500 wide button in menu layer, and scrolled main layer, the 500 px button position in absolute space would extends main scrolling area.

With this fix, if you manually calculate the width of your table inside menu-bar you can submit it and it will work without interfering with scrolling. One way to "cheat" that calculation is to use window->Pos.x + window->Size.x - window->WindowPadding.x or current ClipRect.Max.x and use as your extents to decide on the table width.

e.g.

if (ImGui::BeginMenuBar())
{
    //float avail_width = ImGui::GetContentRegionAvail().x; // this is currently broken
    float avail_width = ImGui::GetCurrentWindow()->ClipRect.Max.x - ImGui::GetCursorScreenPos().x;
    if (ImGui::BeginTable("##layout", 1, ImGuiTableFlags_None, ImVec2(avail_width, 0.0f)))
    {

This will now work. After my second fix you will be able to use GetContentRegionAvail().x which is implicit anyway if you don't a pass a size for the table/item.

I added a test for it: https://github.com/ocornut/imgui_test_engine/commit/7e472e097201b005d310f29062a573e60326a63e Made the test a little verbose as I will amend it once a second batch of fix is pushed.

(The second part of the fix is the more complicated one, but it's my mind)