Frame/Window padding issues with menus and buttons #6134

New issue

Open

opened 2023-02-01 09:46:22 +00:00 by KarlHedlund · 2 comments

KarlHedlund commented

2023-02-01 09:46:22 +00:00

(Migrated from github.com)

Version/Branch of Dear ImGui:

Version: 1.89
Branch: docking (screenshot from docking but reproducible in master)

Back-end/Renderer/Compiler/OS

Back-ends: imgui_impl_opengl3.cpp + imgui_impl_glfw.cpp
Operating System: Windows 11

My Issue/Question:

I'd like to utilize the space to the right of the typical main menu by adding buttons. For this I want some padding for both the menu and the buttons. I might want other controls than buttons on this row so I am hoping that I don't have to use menu items only.

These are the issues:

Setting WindowPadding will only offset the menu from the left.
Setting FramePadding will only add padding on the top and bottom.
The button rectangle is never offsetted from the top, but the text is.

Screenshots/Video
WindowPadding set to (20, 20):

FramePadding set to (20, 20):

FramePadding set to (10, 10):

Standalone, minimal, complete and verifiable example:
Skipping the rest of the menu items for saving space. Replace ImGuiStyleVar_WindowPadding with ImGuiStyleVar_FramePadding for testing the frame padding.

float padding = 20;
ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 0.0f);
ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(padding, padding));

if (ImGui::BeginMainMenuBar())
{
    if (ImGui::BeginMenu("File"))
    {
        ImGui::EndMenu();
    }

    float button_height = 20;
    float button_width = 60;
    ImGui::SameLine();
    ImGui::Button("Button", ImVec2(button_width, button_height));
    ImGui::EndMainMenuBar();
}
ImGui::PopStyleVar(2);

**Version/Branch of Dear ImGui:** Version: 1.89 Branch: docking (screenshot from docking but reproducible in master) **Back-end/Renderer/Compiler/OS** Back-ends: imgui_impl_opengl3.cpp + imgui_impl_glfw.cpp Operating System: Windows 11 **My Issue/Question:** I'd like to utilize the space to the right of the typical main menu by adding buttons. For this I want some padding for both the menu and the buttons. I might want other controls than buttons on this row so I am hoping that I don't have to use menu items only. These are the issues: - Setting WindowPadding will only offset the menu from the left. - Setting FramePadding will only add padding on the top and bottom. - The button rectangle is never offsetted from the top, but the text is. **Screenshots/Video** WindowPadding set to (20, 20): ![menu windowpadding 20](https://user-images.githubusercontent.com/24397310/216006206-8ff01605-fdfb-423a-8ee4-985a9957078d.png) FramePadding set to (20, 20): ![framepadding 20](https://user-images.githubusercontent.com/24397310/216006369-db5f8e85-f889-455a-b206-85f24bb30697.png) FramePadding set to (10, 10): ![framepadding 10](https://user-images.githubusercontent.com/24397310/216006395-648e3522-3cbb-45b1-9120-1f192f2ade1d.png) **Standalone, minimal, complete and verifiable example:** Skipping the rest of the menu items for saving space. Replace ImGuiStyleVar_WindowPadding with ImGuiStyleVar_FramePadding for testing the frame padding. ``` float padding = 20; ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 0.0f); ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(padding, padding)); if (ImGui::BeginMainMenuBar()) { if (ImGui::BeginMenu("File")) { ImGui::EndMenu(); } float button_height = 20; float button_width = 60; ImGui::SameLine(); ImGui::Button("Button", ImVec2(button_width, button_height)); ImGui::EndMainMenuBar(); } ImGui::PopStyleVar(2); ```

jaapiyo commented

2023-03-02 12:48:51 +00:00

(Migrated from github.com)

Hey @KarlHedlund, please try resetting this padding before drawing the buttons. I've had the same when changing the padding of my toolbar buttons.

See lines 237 and 240:

Hey @KarlHedlund, please try resetting this padding before drawing the buttons. I've had the same when changing the padding of my toolbar buttons. See lines 237 and 240: ![afbeelding](https://user-images.githubusercontent.com/25931105/222433092-3048b41d-60fa-46c2-b136-825696bceca2.png)

👍 1

KarlHedlund commented

2023-03-09 10:18:11 +00:00

(Migrated from github.com)

I tried it out and it did make the button visible. There were however some issues with the placement because I'm also using a Menu.

In your example I think it works because you are only using buttons and the insertion point is set using SetCursorPos. All buttons will then act the same. You are basically not using any frame padding for the button.

But when mixing with the Menu, it will not care about the removed frame_padding. I'm guessing it's a value that the MenuBar uses when positioning its menu children, but not buttons.

With a small bit of effort I think a workaround can be done with this though, since the blocking issue was that the button was hidden, thanks!

I tried it out and it did make the button visible. There were however some issues with the placement because I'm also using a Menu. In your example I think it works because you are only using buttons and the insertion point is set using SetCursorPos. All buttons will then act the same. You are basically not using any frame padding for the button. But when mixing with the Menu, it will not care about the removed frame_padding. I'm guessing it's a value that the MenuBar uses when positioning its menu children, but not buttons. With a small bit of effort I think a workaround can be done with this though, since the blocking issue was that the button was hidden, thanks!