ocornut/imgui

Fork 0

mirror of https://github.com/ocornut/imgui.git synced 2026-11-10 19:03:30 +00:00

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

New issue

Open

opened 2023-09-06 09:13:21 +00:00 by DimaKoltun · 7 comments

DimaKoltun commented

2023-09-06 09:13:21 +00:00

(Migrated from github.com)

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

**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(); ```

👍 1

ocornut commented

2023-09-06 09:15:44 +00:00

(Migrated from github.com)

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

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

DimaKoltun commented

2023-09-06 09:19:52 +00:00

(Migrated from github.com)

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

> 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 commented

2023-09-06 09:24:00 +00:00

(Migrated from github.com)

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 commented

2023-09-06 09:44:47 +00:00

(Migrated from github.com)

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.

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: ```cpp 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(); ``` ![image](https://github.com/ocornut/imgui/assets/8225057/1a64e3b6-5283-46c8-8dc0-51b7aed25be7) 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`: ```cpp 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 commented

2023-09-06 10:03:38 +00:00

(Migrated from github.com)

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

ocornut commented

2023-09-06 10:29:24 +00:00

(Migrated from github.com)

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 commented

2023-09-06 13:47:47 +00:00

(Migrated from github.com)

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:
ocornut/imgui_test_engine@7e472e0972
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)

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. ```cpp 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)