When trying to combine 2-column layout with tree, widgets in second column appear in wrong place.

[uglycoyote]

I'm trying to get a layout where the label is to the left of the widget, somewhat like in this screenshot from a tool called Oden that was uploaded to your "post your screenshots" page:

original link: https://cloud.githubusercontent.com/assets/840235/13230096/55e766f6-d9a4-11e5-9d30-419f0f2576e2.png

I thought the easiest way to achieve this layout would be to use columns and put the label in the left column as an ImGui::Text, and in the right column add the widget using an empty label to avoid repeating the text.

My menu is hierarchical so I'm trying to combine this technique with a tree. For the first element in the folder, the widget in the right hand column is ending up in a strange position:

The "Folder 3 subItem 0" button in this picture should appear to the right of the label with the same name, but for some reason it appears at the top, it's not clear why.

If there's some better way besides columns to easily achieve the "label on left, widget on right" layout as in the Oden screenshot, I would be happy to know about alternatives. I imagine their UI was done through heavy customization of the widgets rather than columns, but it's not clear.

Here is the code I'm using to demonstrate the issue. I have omitted the MenuItem class for brevity here, it's the same one that I pasted into issue #1074.

static void DisplayTree(MenuItem* menuItem)
{

	if ( menuItem->children.size() == 0 )
	{
		ImGui::Text(menuItem->text.c_str());
		ImGui::NextColumn();

		ImGui::Button( menuItem->text.c_str() );
		ImGui::NextColumn();
	}
	else
	{
        if (ImGui::TreeNode(menuItem->text.c_str()))
        {
			for ( MenuItem* child : menuItem->children )
			{
				DisplayTree( child );
			}
            ImGui::TreePop();
        }
	}


}

void TreeColumnTest()
{
	MenuItem* menu = GetMainMenu();

	bool showMBCTest;
    ImGui::SetNextWindowSize(ImVec2(200,100), ImGuiSetCond_FirstUseEver);
    ImGui::Begin("TreeColumnTest", &showMBCTest);

	ImGui::Separator();
	ImGui::Columns(2);

	DisplayTree(menu);

	ImGui::Columns(1);


	ImGui::End();

}

[meshula]

does it get fixed if you do this?

static void DisplayTree(MenuItem* menuItem)
{

	if ( menuItem->children.size() == 0 )
	{
		ImGui::AlignFirstTextHeightToWidgets();
		ImGui::Text(menuItem->text.c_str());
		ImGui::NextColumn();

		ImGui::Button( menuItem->text.c_str() );
		ImGui::NextColumn();
	}

[uglycoyote]

Thanks for the suggestion, but no, adding this AlignFirstTextHeightToWidgets does not change the appearance of this at all.

[meshula]

I followed the imgui_demo.cpp code for the function ShowExampleAppPropertyEditor(), you might want to compare your code to that.

[uglycoyote]

Thanks, I was not aware of the Property Editor sample in the Demos. That helped.

Adding a couple of NextColumn() calls after the folder tree node seemed to fix the issue.

AlignFirstTextHeightToWidgets also seems useful for making the vertical spacing more consistent -- as the comment in the Property Editor demo says: "Text and Tree nodes are less high than regular widgets, here we add vertical spacing to make the tree lines equal high.". But AlignFirstTextHeightToWidgets was not necessary (or beneficial) in solving the original problem that the issue was about.

static void DisplayTree(MenuItem* menuItem)
{

	if ( menuItem->children.size() == 0 )
	{
		ImGui::Text(menuItem->text.c_str());
		ImGui::NextColumn();

		ImGui::Button( menuItem->text.c_str() );
		ImGui::NextColumn();
	}
	else
	{
		ImGui::AlignFirstTextHeightToWidgets(); // not needed to solve bug. Helps make vertical spacing more consistent
		if (ImGui::TreeNode(menuItem->text.c_str()))
		{
			// ADDED THESE TWO LINES
			ImGui::NextColumn();
			ImGui::NextColumn();

			for ( MenuItem* child : menuItem->children )
			{
				DisplayTree( child );
			}
			ImGui::TreePop();
		}
	}


}