Collapsing Header Styling Question and Issue

[Chilwiman-27000]

Version/Branch of Dear ImGui:

Version: 1.90v
Branch: Docking

Back-end/Renderer/Compiler/OS

Back-ends: imgui-SFML (found here: https://github.com/SFML/imgui-sfml)
Operating System: Win10 x64

My Issue/Question:

My issue is simple, but I can't, for the life of me, find an answer. In the collapsing header, I want to change the position of the opening and closing arrow from the left to the right, to allow widgets to be placed on the left instead. Below is a mockup I made of my app, and below that is what I see in my current code.

• I've tried using the TreeNodeFlags but found nothing that can help besides changing it to a bullet
• I tried using stylevars, but couldn't find anything relating to the header button
• Searching online and in the wiki but couldn't find anything (also a bit confusing to navigate the wiki)
• I even tried asking ChatGPT in case it new something about this. But nothing.

Currently it doesn't look exactly like the mockup but that's fine, i just want to know how to change, if possible, the position of that header arrow.

Screenshots/Video
How i want it to look:

How it looks Instead:

Standalone, minimal, complete and verifiable example: (see #2261)

//Example of what i have, unsure how to change that arrow...
ImGui::Begin("Example Window");

//Styles for the Headers
ImGui::PushStyleColor(ImGuiCol_Header, sf::Color(0, 0, 0, 0));
ImGui::PushStyleColor(ImGuiCol_Border, sf::Color(255, 255, 255, 255));
ImGui::PushStyleColor(ImGuiCol_Text, sf::Color(255, 255, 255, 255));
ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1);

//Header itself
if (ImGui::CollapsingHeader("Example Header Title", ImGuiTreeNodeFlags_DefaultOpen))
{
    ImGui::Selectable("Example Header Item", true, ImGuiSelectableFlags_None, ImVec2(0,ImGui::GetWindowContentRegionMax().x));
}

ImGui::PopStyleColor(3);
ImGui::PopStyleVar();
ImGui::End();

[ocornut]

It's not possible. The problem with exposing e.g. a style var for moving that button is we would probably first need to settle on an idiom to implement #6294 (which is a generalization of #600) and ditto for title bar.

To be honest you would be better off implementing a custom widget for that...

#include "imgui_internal.h" // for RenderArrow()
bool MyCollapsingHeader(const char* label)
{
    using namespace ImGui;
    PushStyleVar(ImGuiStyleVar_ButtonTextAlign, ImVec2(0.0f, 0.5f));
    bool* p_open = GetStateStorage()->GetBoolRef(GetID(label), false);
    if (Button(label, ImVec2(-FLT_MIN, 0.0f)))
        *p_open ^= 1;
    ImGuiStyle& style = ImGui::GetStyle();
    ImVec2 arrow_pos = ImVec2(GetItemRectMax().x - style.FramePadding.x - GetFontSize(), GetItemRectMin().y + style.FramePadding.y);
    RenderArrow(GetWindowDrawList(), arrow_pos, GetColorU32(ImGuiCol_Text), *p_open ? ImGuiDir_Down : ImGuiDir_Right);
    PopStyleVar();
    return *p_open;
}

if (MyCollapsingHeader("MY_ICON Dashboard"))
{
    ImGui::Text("Extra contents");
    ImGui::Text("Extra contents");
}
if (MyCollapsingHeader("MY_ICON Add/Edit"))
{
    ImGui::Text("Extra contents");
    ImGui::Text("Extra contents");
}

Please note Dear ImGui is not designed to create your own style. Doing so you'll be swimming against the current.

[Chilwiman-27000]

I see, what are the implications of creating your own style? The above actually seems like a good solution to me, which thank you by the way!

[ocornut]

It's just that the library is not designed to facilitate you steering toward different visual designs.
But you can always assemble new things with code.

[Chilwiman-27000]

Got it, I don't mind a little bit of headaches to get that result. Thank you for the explanation and the guide!

[Lanslow4]

dose anyone have a collpasiable header thats coustomly drawn?