Question about layouts #263

New issue

Closed

opened 2015-07-07 20:43:41 +00:00 by MrSapps · 6 comments

MrSapps commented

2015-07-07 20:43:41 +00:00

(Migrated from github.com)

So I've got the following UI:

Using ImGui::CollapsingHeader, ImGui::InputText, ImGui::ListBox and ImGui::Button. How can I make the input text and listbox take the full width of the window like the button? For the button I used:

if (ImGui::Button("Play", ImVec2(ImGui::GetWindowWidth(), 20)))

Also is there some way to make the list box use up all of the vertical space?

I'm aiming for something like this:

So I've got the following UI: ![imguilayout](https://cloud.githubusercontent.com/assets/7420121/8556756/07775c00-24f1-11e5-8d0a-2a4762415799.png) Using ImGui::CollapsingHeader, ImGui::InputText, ImGui::ListBox and ImGui::Button. How can I make the input text and listbox take the full width of the window like the button? For the button I used: if (ImGui::Button("Play", ImVec2(ImGui::GetWindowWidth(), 20))) Also is there some way to make the list box use up all of the vertical space? I'm aiming for something like this: ![target](https://cloud.githubusercontent.com/assets/7420121/8556846/931a4344-24f1-11e5-96b4-53f7b54f932a.png)

ocornut commented

2015-07-07 20:51:58 +00:00

(Migrated from github.com)

Use PushItemWidth(-1) for left alignment.
Pass a label starting with "##" to your listbox so it is invisible.

Use PushItemWidth(-1) for left alignment. Pass a label starting with "##" to your listbox so it is invisible.

MrSapps commented

2015-07-07 20:54:46 +00:00

(Migrated from github.com)

Nice thanks 👍 any idea about increasing the listbox height? Seems there isn't a PushItemHeight?

Edit: Or rather how do I know how many items it would take so it fills the dialog up to the button.

Nice thanks :+1: any idea about increasing the listbox height? Seems there isn't a PushItemHeight? Edit: Or rather how do I know how many items it would take so it fills the dialog up to the button.

ocornut commented

2015-07-07 22:45:57 +00:00

(Migrated from github.com)

You can create a more custom Listbox by calling its inner functions yourself, basically you want to call BeginChildFrame() / EndChildFrame() and stick a bunch of Selectable() inside. This is roughly was ListBox() does. I could perhaps add a variant of ListBox() with an explicit size. edit ListBox high-level helpers are poorly designed I think.

If you pass (0.0f, -100f) size to BeginChildFrame() it'll leave 100 of vertical space. You may want to use (0.0f, -ImGui::GetItemsLineHeightWithSpacing) here.

PushItemWidth() is a separate thing because it pertain to many widgets (although this system will be revampd). There is a height_in_items parameter to ListBox() but no explicit size to it at the moment. You can create a more custom Listbox by calling its inner functions yourself, basically you want to call BeginChildFrame() / EndChildFrame() and stick a bunch of Selectable() inside. This is roughly was ListBox() does. I could perhaps add a variant of ListBox() with an explicit size. _edit_ ListBox high-level helpers are poorly designed I think. If you pass (0.0f, -100f) size to BeginChildFrame() it'll leave 100 of vertical space. You may want to use (0.0f, -ImGui::GetItemsLineHeightWithSpacing) here.

ocornut commented

2015-07-07 22:54:44 +00:00

(Migrated from github.com)

NB: i fixed a bug where ListBoxHeader() wouldn't take those negative sizes like other functions did.

            if (ImGui::ListBoxHeader("test", ImVec2(0, -20)))
            {
                ImGui::Selectable("aaa");
                ImGui::Selectable("aabb");
                ImGui::ListBoxFooter();
            }

Although the difference between ListBoxHeader() and BeginChildFrame() is only that the earlier has a label so if you don't need one you can use BeginChildFrame() anyway.

NB: i fixed a bug where ListBoxHeader() wouldn't take those negative sizes like other functions did. ``` cpp if (ImGui::ListBoxHeader("test", ImVec2(0, -20))) { ImGui::Selectable("aaa"); ImGui::Selectable("aabb"); ImGui::ListBoxFooter(); } ``` Although the difference between ListBoxHeader() and BeginChildFrame() is only that the earlier has a label so if you don't need one you can use BeginChildFrame() anyway.

ocornut commented

2015-07-10 23:18:00 +00:00

(Migrated from github.com)

@paulsapps Did you get that working?

MrSapps commented

2015-07-11 00:07:58 +00:00

(Migrated from github.com)

I didn't try the auto sizing of the listbox by creating my own yet, but I'm certain it will work with the info you've provided :) thanks!