Sub menus overlaying each other

[codecat]

So I have noticed that open sub-menus will kinda overlay on its parent menu, here's an example:

I looked around in ImGuiStyle and couldn't find anything that would let me change this, though I kinda imagine it might have something to do with my style where I changed the padding:

style.FramePadding.x = 6;
style.FramePadding.y = 4;

Is it possible to change the appearance/positioning of menus?

[ocornut]

It is intentional and desirable because when you start being in situation where child menus needs to be on the LEFT of their parent because of lack of space on the right, it would become really hard to distinguish the order of menus.
(Note that Windows is doing the same)

Why would you like to change that in the first place?

[codecat]

That's a fair point. I probably don't have to change it then, but I think it looks weird to me because of the transparency. Maybe I can fix that myself in the style's colors; if there is a style color for the menu background of these? I only see ImGuiCol_MenuBarBg, which I think is for the actual bar.

[ocornut]

This is a fair point that its look a little weird with transparency. The default theme is opaque there, it is using ImGuiCol_PopupBg.

( ImGuiCol_PopupBg is also used by normal Popups so that overlap might be problematic depending on what your theme is trying to do. For 1.50 (and pretty much the only reason 1.50 is on hold, otherwise we are already at 95% of 1.50) I want to refactor some of the stylish enumerations and move the borders to the regular style structure so I might revamp that. )

[itamago]

@codecat, I love the colors you are using !
Would you mind posting the color templates, please ?

[codecat]

Sure! It's worth noting I took this from some other issue here, but I don't remember which.. :)

ImGuiStyle &style = ImGui::GetStyle();
style.AntiAliasedLines = true;
style.AntiAliasedShapes = true;

style.WindowRounding = 2;
style.ChildWindowRounding = 2;

style.ScrollbarSize = 16;
style.ScrollbarRounding = 3;

style.GrabRounding = 2;

style.ItemSpacing.x = 10;
style.ItemSpacing.y = 4;

style.IndentSpacing = 22;

style.FramePadding.x = 6;
style.FramePadding.y = 4;

style.Alpha = 1.0f;
style.FrameRounding = 3.0f;

style.Colors[ImGuiCol_Text] = ImVec4(0.00f, 0.00f, 0.00f, 1.00f);
style.Colors[ImGuiCol_TextDisabled] = ImVec4(0.60f, 0.60f, 0.60f, 1.00f);
style.Colors[ImGuiCol_WindowBg] = ImVec4(0.94f, 0.94f, 0.94f, 0.94f);
style.Colors[ImGuiCol_ChildWindowBg] = ImVec4(0.00f, 0.00f, 0.00f, 0.00f);
style.Colors[ImGuiCol_PopupBg] = ImVec4(1.00f, 1.00f, 1.00f, 1.00f);
style.Colors[ImGuiCol_Border] = ImVec4(0.00f, 0.00f, 0.00f, 0.39f);
style.Colors[ImGuiCol_BorderShadow] = ImVec4(1.00f, 1.00f, 1.00f, 0.10f);
style.Colors[ImGuiCol_FrameBg] = ImVec4(1.00f, 1.00f, 1.00f, 0.94f);
style.Colors[ImGuiCol_FrameBgHovered] = ImVec4(0.26f, 0.59f, 0.98f, 0.40f);
style.Colors[ImGuiCol_FrameBgActive] = ImVec4(0.26f, 0.59f, 0.98f, 0.67f);
style.Colors[ImGuiCol_TitleBg] = ImVec4(0.96f, 0.96f, 0.96f, 1.00f);
style.Colors[ImGuiCol_TitleBgCollapsed] = ImVec4(1.00f, 1.00f, 1.00f, 0.51f);
style.Colors[ImGuiCol_TitleBgActive] = ImVec4(0.82f, 0.82f, 0.82f, 1.00f);
style.Colors[ImGuiCol_MenuBarBg] = ImVec4(0.86f, 0.86f, 0.86f, 1.00f);
style.Colors[ImGuiCol_ScrollbarBg] = ImVec4(0.98f, 0.98f, 0.98f, 0.53f);
style.Colors[ImGuiCol_ScrollbarGrab] = ImVec4(0.69f, 0.69f, 0.69f, 1.00f);
style.Colors[ImGuiCol_ScrollbarGrabHovered] = ImVec4(0.59f, 0.59f, 0.59f, 1.00f);
style.Colors[ImGuiCol_ScrollbarGrabActive] = ImVec4(0.49f, 0.49f, 0.49f, 1.00f);
style.Colors[ImGuiCol_ComboBg] = ImVec4(0.86f, 0.86f, 0.86f, 0.99f);
style.Colors[ImGuiCol_CheckMark] = ImVec4(0.26f, 0.59f, 0.98f, 1.00f);
style.Colors[ImGuiCol_SliderGrab] = ImVec4(0.24f, 0.52f, 0.88f, 1.00f);
style.Colors[ImGuiCol_SliderGrabActive] = ImVec4(0.26f, 0.59f, 0.98f, 1.00f);
style.Colors[ImGuiCol_Button] = ImVec4(0.26f, 0.59f, 0.98f, 0.40f);
style.Colors[ImGuiCol_ButtonHovered] = ImVec4(0.26f, 0.59f, 0.98f, 1.00f);
style.Colors[ImGuiCol_ButtonActive] = ImVec4(0.06f, 0.53f, 0.98f, 1.00f);
style.Colors[ImGuiCol_Header] = ImVec4(0.26f, 0.59f, 0.98f, 0.31f);
style.Colors[ImGuiCol_HeaderHovered] = ImVec4(0.26f, 0.59f, 0.98f, 0.80f);
style.Colors[ImGuiCol_HeaderActive] = ImVec4(0.26f, 0.59f, 0.98f, 1.00f);
style.Colors[ImGuiCol_Column] = ImVec4(0.39f, 0.39f, 0.39f, 1.00f);
style.Colors[ImGuiCol_ColumnHovered] = ImVec4(0.26f, 0.59f, 0.98f, 0.78f);
style.Colors[ImGuiCol_ColumnActive] = ImVec4(0.26f, 0.59f, 0.98f, 1.00f);
style.Colors[ImGuiCol_ResizeGrip] = ImVec4(1.00f, 1.00f, 1.00f, 0.50f);
style.Colors[ImGuiCol_ResizeGripHovered] = ImVec4(0.26f, 0.59f, 0.98f, 0.67f);
style.Colors[ImGuiCol_ResizeGripActive] = ImVec4(0.26f, 0.59f, 0.98f, 0.95f);
style.Colors[ImGuiCol_CloseButton] = ImVec4(0.59f, 0.59f, 0.59f, 0.50f);
style.Colors[ImGuiCol_CloseButtonHovered] = ImVec4(0.98f, 0.39f, 0.36f, 1.00f);
style.Colors[ImGuiCol_CloseButtonActive] = ImVec4(0.98f, 0.39f, 0.36f, 1.00f);
style.Colors[ImGuiCol_PlotLines] = ImVec4(0.39f, 0.39f, 0.39f, 1.00f);
style.Colors[ImGuiCol_PlotLinesHovered] = ImVec4(1.00f, 0.43f, 0.35f, 1.00f);
style.Colors[ImGuiCol_PlotHistogram] = ImVec4(0.90f, 0.70f, 0.00f, 1.00f);
style.Colors[ImGuiCol_PlotHistogramHovered] = ImVec4(1.00f, 0.60f, 0.00f, 1.00f);
style.Colors[ImGuiCol_TextSelectedBg] = ImVec4(0.26f, 0.59f, 0.98f, 0.35f);

// Comment this for light theme
for (int i = 0; i <= ImGuiCol_COUNT; i++) {
	ImVec4& col = style.Colors[i];
	float H, S, V;
	ImGui::ColorConvertRGBtoHSV(col.x, col.y, col.z, H, S, V);

	if (S < 0.1f) {
		V = 1.0f - V;
	}
	ImGui::ColorConvertHSVtoRGB(H, S, V, col.x, col.y, col.z);
	if (col.w < 1.00f) {
		col.w *= 0.98f;
	}
}

style.Colors[ImGuiCol_ModalWindowDarkening] = ImVec4(0.0f, 0.0f, 0.0f, 0.9f);

[itamago]

thank you !!
[EDIT] That's funny, because the original colors are from my own theme :) And you did a clever job by changing them programmatically ! Thanks again !

[codecat]

Actually, I got that color inversion code from the same Github issue 🤔

[ocornut]

@codecat I made a small change today to alter the overlap to use ItemInnerSpacing.x instead of ItemSpacing.x (with the default style that would make the overlap twice smaller).

I think this would attenuate this issue a little bit. I noticed on your recent post that you are still using the same style so maybe that attenuation is enough to make this a non-problem?

If you can't updating Dear ImGui easily, you can test the change localy by changing the assignment in FindBestWindowPosForPopup, change float horizontal_overlap = g.Style.ItemSpacing.x; to use g.Style.ItemInnerSpacing.x instead.

I am not sure else what to do and I am tempted to close this issue if you think this isn't a big problem.
In the future we may introduce a MenuBg style field but I would like to wait for style 2.0 with color defaults redirection.

[codecat]

Thanks, that would indeed help! Will be able to try it out tonight. It's been a while since I've seen this issue, partly because I don't have a lot of these overlapping submenus anymore. Feel free to close this issue if you want.

By the way, is there an issue for "style 2.0"? I'd love to read your plans for that!

[ocornut]

Thanks, will close this then, always a bit of a relief to close something ;)

By the way, is there an issue for "style 2.0"? I'd love to read your plans for that!

This is scattered around posts and personal notes. Too early/busy to make a proper write-up, hopefully things will move this year. I'm currently looking at DPI/scaling issues first.