How make that custom TabBar being render at the end of the window and not be pushed down by other items?

[KennyProgrammer]

Version/Branch of Dear ImGui:

Version: LATEST
Branch: docking

Back-end/Renderer/Compiler/OS

Back-ends: DX10 / DX11 / GL4
Operating System: Windows 7/10

My Issue/Question:

Hello everyone. I have such a problem. How do I make it so that I can draw a TabBar at the very bottom of the window, but at the same time so that other items such as tables and buttons do not move it down? The first I tried using SetCursorPos() where I set the value for y to windowSize.y - tabBarSizeY, and it worked, but when a scroll bar appears and I move it down, my tab bar still moves down along with all the elements.

Screenshots/Video

This is how i wanted to my tabbar looks like:

And what i get (It just slides down along with other elements when scrolling or when there is not enough space on the window by Y):

// How I typically render this:

bool close = false;
int flags = !isInteractable ? ImGuiWindowFlags_NoInputs : 0;
ImGui::Begin("MyPanel", &close, flags);

// Draw buttons on top { ... }
ImGui::Separator();

int tableFlags = ImGuiTableFlags_Resizable;
if (ImGui::BeginTable("###HierachyContextTable", 2, tableFlags, {ImGui::GetContentRegionAvail().x, ImGui::GetContentRegionAvail().y})) {
 // Draw table.
 ImGui::EndTable();
}

// Down tab bar. (That what i want to achive)
ImGui::BeginTabBar("###DownTabBar");
ImGui::SetNextItemWidth(60.0f);
ImGui::SliderInt("###ThumbnailSizeSlider", &thumbnailSize, 64, 256);
ImGui::EndTabBar();

ImGui::End();

Is it possible to implement this at all with ImGui or will have to change the behaviour of TabBars a little?

Update 1:
I also tried for elements that should not shift the tabbar is combine it in child window, and disable scrolling for main window, but then I have some elements that draws on top of the tab bar. Although I draw the tabbar after the child window and it is logical that ImGui should draw all its contents first and then draw tabbar on top.

ImGui::Begin("MyPanel", &close, flags);

// Draw buttons on top { ... }

ImGui::BeginChild("MyPanel_Child");
int tableFlags = ImGuiTableFlags_Resizable;
if (ImGui::BeginTable("###HierachyContextTable", 2, tableFlags, {ImGui::GetContentRegionAvail().x, ImGui::GetContentRegionAvail().y})) {
 // Draw table.
 ImGui::EndTable();
}
ImGui::EndChild();

// Down tab bar. (That what i want to achive)
ImGui::SetCursorPos({ ImGui::GetCursorPosX(), ImGui::GetWindowSize().y - 55.0f}); // Set manually tabbar position relative to size of main window and offset 55.0f to be visible on the screen.
ImGui::BeginTabBar("###DownTabBar");
ImGui::SetNextItemWidth(60.0f);
ImGui::SliderInt("###ThumbnailSizeSlider", &thumbnailSize, 64, 256);
ImGui::EndTabBar();

ImGui::End();

[sturnclaw]

Your child window is by default taking all remaining available space in the main window. You'll need to pass BeginChild() an explicit size parameter using ImVec2(0, ImGui::GetWindowSize().y - myTabBarHeight), after which point you should be able to draw the tab bar (or more generally, any other widget for which you can precalculate the size) as normal.

Edit: I'd recommend using GetContentRegionAvail() rather than GetWindowSize as it takes current cursor position and other layout primitives into account.

[ocornut]

Linking to #3032, #3722 as I think down the line we could make TabBar work with a cardinal direction.

[KennyProgrammer]

Hello everyone, im here to revisit old issues here.

How @Web-eWorks says if you need to create tiny down bar in the window, just need make a child window on the root window and set y size like this:

Vector2f mainChildSize  =  { 0, ImGui::GetContentRegionAvailY() - 20.0f }; // 20 size of down bar,
ImGui::BeginChild("##MainChild", *(ImVec2*)&mainChildSize, false, flags);

And then create down bar child with available space.

ImGui::BeginChild("##DownBar", {}, false, flags);

So something like this:

// Draw main child.
Vector2f mainChildSize  =  { 0, ImGui::GetContentRegionAvailY() - 20.0f }; // 20 size of down bar,
ImGui::BeginChild("##MainChild", *(ImVec2*)&mainChildSize, false, flags);

... some widgets on main child.

// Draw down bar.
ImGui::BeginChild("##DownBar", {}, false, flags);

.. some widgets on down bar.

ImGui::End();

ImGui::End();