Sub menus overlaying each other

codecat commented

2017-04-01 15:15:45 +00:00

(Migrated from github.com)

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?

So I have noticed that open sub-menus will kinda overlay on its parent menu, here's an example: ![](https://4o4.nl/20170401E5L6F.png) 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 commented

2017-04-01 15:25:24 +00:00

(Migrated from github.com)

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?

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 commented

2017-04-01 15:34:13 +00:00

(Migrated from github.com)

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.

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 commented

2017-04-01 15:53:54 +00:00

(Migrated from github.com)

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

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 commented

2017-04-03 17:34:36 +00:00

(Migrated from github.com)

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

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

codecat commented

2017-04-03 18:11:59 +00:00

(Migrated from github.com)

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

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 commented

2017-04-05 08:18:23 +00:00

(Migrated from github.com)

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 !

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 commented

2017-04-05 08:33:13 +00:00

(Migrated from github.com)

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

ocornut commented

2019-02-06 11:39:13 +00:00

(Migrated from github.com)

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

2019-02-06 12:37:03 +00:00

(Migrated from github.com)

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!

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 commented

2019-02-06 13:18:52 +00:00

(Migrated from github.com)

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.

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.

Rows
Columns

Sub menus overlaying each other #1086