Skip to content

Add ImGuiTreeNodeFlags_NoFrameOuterPadding flag#9181

Open
RegimantasSimkus wants to merge 1 commit intoocornut:masterfrom
RegimantasSimkus:add-treenodeflags-noframeouterpadding
Open

Add ImGuiTreeNodeFlags_NoFrameOuterPadding flag#9181
RegimantasSimkus wants to merge 1 commit intoocornut:masterfrom
RegimantasSimkus:add-treenodeflags-noframeouterpadding

Conversation

@RegimantasSimkus
Copy link
Contributor

Added ImGuiTreeNodeFlags_NoFrameOuterPadding.

Why?
I've had a few different projects where I've used CollapsingHeader and have not been a fan of the way the edges of the header leak outwards onto the side, there is currently no real solution to this besides hacky approaches. The current logic is to add this 'outer padding' if the 'ImGuiTreeNodeFlags_Framed' is applied.

In my UIs when this collapsible header lives on a sidebar I don't think it looks very nice when its misaligned with contents.

Previous solution
My previous solution to this was to access window->WindowPadding and set it to (0, 0) for the TreeNodeEx/CollapsingHeader function call, but this solution is ugly and hacky.

	ImGuiWindow* window = GImGui->CurrentWindow;
	ImVec2 padding = window->WindowPadding;
	window->WindowPadding.x = window->WindowPadding.y = 0;
	bool configOpen = ImGui::CollapsingHeader("Configuration");
	window->WindowPadding = padding;

New solution

if (ImGui::CollapsingHeader("Configuration", ImGuiTreeNodeFlags_NoFrameOuterPadding))
{
}

Before
image
image

After
Nicely aligned
image
image

@RegimantasSimkus
Copy link
Contributor Author

Dear.ImGui.DirectX9.Example.2026-01-19.19-36-44.mp4

@ocornut ocornut added the tree tree nodes label Jan 19, 2026
@SuperRonan
Copy link
Contributor

@RegimantasSimkus I have an unrelated question:
How did you make the 'Lorem ipsum' and 'Eos maiores' rectangular sections with a border and label?
I haven't found a way to do it in imgui and I was about to submit a PR with my own implementation of it until I randomly found your post.
I am very curious to know if their is already a way to do it.

@RegimantasSimkus
Copy link
Contributor Author

@RegimantasSimkus I have an unrelated question: How did you make the 'Lorem ipsum' and 'Eos maiores' rectangular sections with a border and label? I haven't found a way to do it in imgui and I was about to submit a PR with my own implementation of it until I randomly found your post. I am very curious to know if their is already a way to do it.

custom component, it's a wrapper around BeginChild+padding and utilises ImGuiDrawList to draw the borders & title.

@SuperRonan
Copy link
Contributor

custom component, it's a wrapper around BeginChild+padding and utilises ImGuiDrawList to draw the borders & title.

Thanks!
That's what I was suspecting (and is very close to my first impl before integrated it in the child window logic).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

tree tree nodes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants