ImGui::Separator() ignores grouping

gamedeff commented

2015-04-27 19:45:58 +00:00

(Migrated from github.com)

You can see on the attached

screenshot that separator intersects image on the left, code to reproduce:

    ImGui::Begin((username + "'s anime list").c_str(), &show_another_window/*, ImGuiWindowFlags_AlwaysAutoResize | ImGuiWindowFlags_NoTitleBar*/);
    ImVec2 tex_screen_pos = ImGui::GetCursorScreenPos();
    float tex_w = sites[current_site].titles[current_title_it->first].cover_texture_w * sites[current_site].cover_image_scale_x;
    float tex_h = sites[current_site].titles[current_title_it->first].cover_texture_h * sites[current_site].cover_image_scale_y;
    ImTextureID tex_id = sites[current_site].titles[current_title_it->first].cover_texture_handle; //ImGui::GetIO().Fonts->TexID;
    if(tex_id)
    {
        ImGui::Image(tex_id, ImVec2(tex_w, tex_h), ImVec2(0,0), ImVec2(1,1), ImColor(0,0,0,255), ImColor(255,255,255,128));
        ImGui::SameLine();
    }

    ImGui::BeginGroup();

    ImGui::TextColored(ImColor(255, 0, 0), "%s (%d)", current_title_it->first.c_str(), sites[current_site].titles[current_title_it->first].year);
    ImGui::Separator();
    ImGui::Text("Status: %s", sites[current_site].title_statuses[current_title_it->second.status].c_str());

    {
        ImGui::Text("Type: %s", sites[current_site].title_types[sites[current_site].titles[current_title_it->first].type].c_str());
        ImGui::Text("Episodes: %d of %d", current_title_it->second.episodes_watched_num, sites[current_site].titles[current_title_it->first].episodes_num);
        ImGui::SameLine();
        ImGui::SliderInt("##eps", (int *)&current_title_it->second.episodes_watched_num, 0, sites[current_site].titles[current_title_it->first].episodes_num);
        ImGui::Text("Times watched: %d", current_title_it->second.times_watched_num);
        ImGui::Text("Score: %d of 10 (average: %.3f)", current_title_it->second.rating * sites[current_site].rating_mulcoef, sites[current_site].titles[current_title_it->first].average_rating * sites[current_site].rating_mulcoef);
    }

    ImGui::EndGroup();

    ImGui::Separator();

    ImGui::PushItemWidth(-1);
    ImGui::ListBox("##empty", &current_title_index, Items_TitleMapGetter, &titles.begin(), titles.size());
    ImGui::PopItemWidth();

    ImGui::End();

You can see on the attached ![imguisepbug](https://cloud.githubusercontent.com/assets/6753840/7356158/0a74ec14-ed2f-11e4-9d0b-d639f87bd280.PNG) screenshot that separator intersects image on the left, code to reproduce: ``` cpp ImGui::Begin((username + "'s anime list").c_str(), &show_another_window/*, ImGuiWindowFlags_AlwaysAutoResize | ImGuiWindowFlags_NoTitleBar*/); ImVec2 tex_screen_pos = ImGui::GetCursorScreenPos(); float tex_w = sites[current_site].titles[current_title_it->first].cover_texture_w * sites[current_site].cover_image_scale_x; float tex_h = sites[current_site].titles[current_title_it->first].cover_texture_h * sites[current_site].cover_image_scale_y; ImTextureID tex_id = sites[current_site].titles[current_title_it->first].cover_texture_handle; //ImGui::GetIO().Fonts->TexID; if(tex_id) { ImGui::Image(tex_id, ImVec2(tex_w, tex_h), ImVec2(0,0), ImVec2(1,1), ImColor(0,0,0,255), ImColor(255,255,255,128)); ImGui::SameLine(); } ImGui::BeginGroup(); ImGui::TextColored(ImColor(255, 0, 0), "%s (%d)", current_title_it->first.c_str(), sites[current_site].titles[current_title_it->first].year); ImGui::Separator(); ImGui::Text("Status: %s", sites[current_site].title_statuses[current_title_it->second.status].c_str()); { ImGui::Text("Type: %s", sites[current_site].title_types[sites[current_site].titles[current_title_it->first].type].c_str()); ImGui::Text("Episodes: %d of %d", current_title_it->second.episodes_watched_num, sites[current_site].titles[current_title_it->first].episodes_num); ImGui::SameLine(); ImGui::SliderInt("##eps", (int *)&current_title_it->second.episodes_watched_num, 0, sites[current_site].titles[current_title_it->first].episodes_num); ImGui::Text("Times watched: %d", current_title_it->second.times_watched_num); ImGui::Text("Score: %d of 10 (average: %.3f)", current_title_it->second.rating * sites[current_site].rating_mulcoef, sites[current_site].titles[current_title_it->first].average_rating * sites[current_site].rating_mulcoef); } ImGui::EndGroup(); ImGui::Separator(); ImGui::PushItemWidth(-1); ImGui::ListBox("##empty", &current_title_index, Items_TitleMapGetter, &titles.begin(), titles.size()); ImGui::PopItemWidth(); ImGui::End(); ```

ocornut commented

2015-04-27 20:09:34 +00:00

(Migrated from github.com)

Hmm- The problem is that even though I can fix it for the left side, at the point where you are calling Separator the group is still growing and doesn't have a known width. So the fix will not cover every case evenly. Perhaps later on BeginGroup() can take size and function as a small subset of BeginChild to cover this sort of thing.

gamedeff commented

2015-04-27 20:11:53 +00:00

(Migrated from github.com)

Yeah, or add size parameter to separator itself.

ocornut commented

2015-04-27 20:26:26 +00:00

(Migrated from github.com)

I have committed the above because I think it is more correct, it should fix your use case.

However I need to add new parameters and variants to Separator() to cover more cases. We have a similar open issue with Columns(), and there is also the fact the Separator() by default draw but do not "register" its size back into the layout. This is desirable by default, but If a size is explicitly passed it should probably register it. I'll keep this bug open until I can come up with answers to those various problems.

I have committed the above because I think it is more correct, it should fix your use case. However I need to add new parameters and variants to Separator() to cover more cases. We have a similar open issue with Columns(), and there is also the fact the Separator() by default draw but do not "register" its size back into the layout. This is desirable by default, but If a size is explicitly passed it should probably register it. I'll keep this bug open until I can come up with answers to those various problems.

gamedeff commented

2015-04-28 06:43:55 +00:00

(Migrated from github.com)

OK, also there are similar issues with other widgets, for example:

    //ImGui::Text("Status: %s", sites[current_site].title_statuses[current_title_it->second.status].c_str());
    ImGui::Text("Status: ");
    ImGui::SameLine();
    ImGui::Combo("", (int *)&current_title_it->second.status, &sites[current_site].title_statuses[0], sites[current_site].title_statuses.size());

looks like this:

OK, also there are similar issues with other widgets, for example: ``` cpp //ImGui::Text("Status: %s", sites[current_site].title_statuses[current_title_it->second.status].c_str()); ImGui::Text("Status: "); ImGui::SameLine(); ImGui::Combo("", (int *)&current_title_it->second.status, &sites[current_site].title_statuses[0], sites[current_site].title_statuses.size()); ``` looks like this: ![imguicombobug](https://cloud.githubusercontent.com/assets/6753840/7364077/006d9c46-ed8b-11e4-8793-c37724f58f33.PNG)

ocornut commented

2015-04-28 06:48:16 +00:00

(Migrated from github.com)

What is the issue here?
Combo box are meant to display outside of the parent window. You can resize them using PushItemWidth/PopItemWidth.

Btw for this sort of situation you can call ImGui::AlignFirstTextHeightToWidgets() prior to Text to vertically align the Status text downward. Later on you'll be able to use Label-Widget configuration instead of Widget-Label so it will be made easier.

What is the issue here? Combo box are meant to display outside of the parent window. You can resize them using PushItemWidth/PopItemWidth. Btw for this sort of situation you can call ImGui::AlignFirstTextHeightToWidgets() prior to Text to vertically align the Status text downward. Later on you'll be able to use Label-Widget configuration instead of Widget-Label so it will be made easier.

gamedeff commented

2015-04-30 18:49:22 +00:00

(Migrated from github.com)

Yes, thank you, ImGui::AlignFirstTextHeightToWidgets() helped with vertical alignment (what's interesting is that I didn't noticed that issue before).
What I referenced to is combobox automatic width calculation - I fixed it by commenting out this lines:

        // Default item width. Make it proportional to window size if window manually resizes
        if (window->Size.x > 0.0f && !(window->Flags & ImGuiWindowFlags_Tooltip) && !(window->Flags & ImGuiWindowFlags_AlwaysAutoResize))
            window->ItemWidthDefault = (float)(int)(window->Size.x * 0.65f);
        else
            window->ItemWidthDefault = 200.0f;

and adding window->ItemWidthDefault = -1; instead in ImGui::Begin, so now ImGui::CalcItemWidth() returns valid value and we can see combobox'es down arrow inside the window:

Yes, thank you, ImGui::AlignFirstTextHeightToWidgets() helped with vertical alignment (what's interesting is that I didn't noticed that issue before). What I referenced to is combobox automatic width calculation - I fixed it by commenting out this lines: ``` cpp // Default item width. Make it proportional to window size if window manually resizes if (window->Size.x > 0.0f && !(window->Flags & ImGuiWindowFlags_Tooltip) && !(window->Flags & ImGuiWindowFlags_AlwaysAutoResize)) window->ItemWidthDefault = (float)(int)(window->Size.x * 0.65f); else window->ItemWidthDefault = 200.0f; ``` and adding window->ItemWidthDefault = -1; instead in ImGui::Begin, so now ImGui::CalcItemWidth() returns valid value and we can see combobox'es down arrow _inside_ the window: ![imguicombobugfixed](https://cloud.githubusercontent.com/assets/6753840/7420133/a936fa72-ef82-11e4-8768-5455728e87ba.PNG)

ocornut commented

2015-05-01 08:42:03 +00:00

(Migrated from github.com)

it's not a bug here. The default behaviour for big widget is to take 65% of the width.
You can use PushItemWidth(-1) to always align to right side if you don't have a label.

it's not a bug here. The default behaviour for big widget is to take 65% of the width. You can use PushItemWidth(-1) to always align to right side if you don't have a label.

gamedeff commented

2015-05-08 04:42:15 +00:00

(Migrated from github.com)

Yeah, but why not 55% or 70%? ;-) I mean, why not auto-size items by it's content, 'cos right now I write something like this:

const char *num_str = 0;
Items_IndexNumberArrayGetter(0, num, &num_str);
ImGui::PushItemWidth(ImGui::CalcTextSize(num_str).x + ImGui::GetStyle().ItemInnerSpacing.x + ImGui::GetStyle().FramePadding.x + ImGui::GetWindowFontSize() + ImGui::GetStyle().FramePadding.x * 2.0f);
ImGui::Combo("##num", &num, Items_IndexNumberArrayGetter, 0, some_num));
ImGui::PopItemWidth();

Yeah, but why not 55% or 70%? ;-) I mean, why not auto-size items by it's content, 'cos right now I write something like this: ``` c++ const char *num_str = 0; Items_IndexNumberArrayGetter(0, num, &num_str); ImGui::PushItemWidth(ImGui::CalcTextSize(num_str).x + ImGui::GetStyle().ItemInnerSpacing.x + ImGui::GetStyle().FramePadding.x + ImGui::GetWindowFontSize() + ImGui::GetStyle().FramePadding.x * 2.0f); ImGui::Combo("##num", &num, Items_IndexNumberArrayGetter, 0, some_num)); ImGui::PopItemWidth(); ```

ocornut commented

2015-05-08 07:55:20 +00:00

(Migrated from github.com)

The default behavior is that we want all widgets to be aligned with each other so we have the same width, and ImGui at the moment by default uses a "widget -- label" scheme which was chosen to minimize the need for clipping rectangles.

I am not sure to understand what you are trying to do. If you wanted the combo box to be the size or your "Watched" string then it would change size every time you select another value (e.g. "Want to Watch"), which would look odd and possibly mess up with layout. I've never seen a combo box behave like that with a standard widget system. It's possible as you are showing but not sure why you are doing that.

If you want to achieve what's in the picture above, aka align the combo to the right size of the window, then you can do

ImGui::PushItemWidth(-1);
ImGui::Combo();
imGui::PopItemWidth();

This will later be made easier as a I refactor the widget "layouts" options to allow for multiple settings including "label (single space) widget".

The default behavior is that we want all widgets to be aligned with each other so we have the same width, and ImGui at the moment by default uses a "widget -- label" scheme which was chosen to minimize the need for clipping rectangles. I am not sure to understand what you are trying to do. If you wanted the combo box to be the size or your "Watched" string then it would change size every time you select another value (e.g. "Want to Watch"), which would look odd and possibly mess up with layout. I've never seen a combo box behave like that with a standard widget system. It's possible as you are showing but not sure why you are doing that. If you want to achieve what's in the picture above, aka align the combo to the right size of the window, then you can do ``` ImGui::PushItemWidth(-1); ImGui::Combo(); imGui::PopItemWidth(); ``` This will later be made easier as a I refactor the widget "layouts" options to allow for multiple settings including "label (single space) widget".

ocornut commented

2023-10-03 13:37:51 +00:00

(Migrated from github.com)

Closing this issue as mostly sanitized/standardized now.

excellentcucumber commented

2023-10-03 15:39:42 +00:00

(Migrated from github.com)

You're truly a hero for still remembering & working on an issue nearly a decade ago. I do freelancing and i use imgui for most of my GUI, i love to donate for your work but i unfortunately can't aford it because i live in a poor country and even 5 American Dollar can feed my family for 5 days.

All i can do is wish you do well, have lots of health and be successful on your carreer. Omar - not the hero we deserve, but the hero we need!

You're truly a hero for still remembering & working on an issue nearly a decade ago. I do freelancing and i use imgui for most of my GUI, i love to donate for your work but i unfortunately can't aford it because i live in a poor country and even 5 American Dollar can feed my family for 5 days. All i can do is wish you do well, have lots of health and be successful on your carreer. Omar - not the hero we deserve, but the hero we need!

Rows
Columns

ImGui::Separator() ignores grouping #205