Align label on the left, and Widget on the right

[Folling]

Version: 1.7.1 Branch: docking

Back-end/Renderer/Compiler/OS

Back-ends: imgui_impl_glfw3.cpp Compiler: clang Operating System: arch-linux 64bit

My Issue/Question:

I am currently trying to figure out how to align a label/text on the left, and some form of input node on the right. The input node on the right is determined through a variable in a model-class and then is drawn as one of the following: Checkbox IntegerTextfield Textfield ComboBox Text

this is all rendered in a window and currently looks like this:

However, what I would like to achieve, is that the text is left-aligned, and the input-widget is right aligned, as well as limited to 50% of the window width, which would look something like this (rough estimate for the width, but it should be 50%):

I was unable to achieve this with SameLine, as the checkbox would then be aligned on the left and I'm unable to get the size of the widget since SameLine must be called before drawing the widget. This is the result using SameLine and pushing a width for the item:

[Folling]

In addition: The separator usually is one pixel off: For anyone encountering the same issue, it can be fixed by changing: float thickness_layout = 0.0f; to float thickness_layout = 1.0f in SeperatorEx.

[ocornut]

“I'm unable to get the width of the input-widget before it's drawn”

That width is set by PushItemWidth() or SetNextItemWidth(), so I am not sure to understand what is your problem.

You should be able to use something like

int total_w = GetContentRegionAvail().x; Text(); SameLine(total_w); SetNextItemWidth(total_w); SomeWidget().

[Folling]

Well I have the width before hand, but using: PushItemWidth(usableWindowWidth/2) to assign the widget 50% of the remaining area puts the checkbox on the left, instead of on the right as I'd like it to be - as can be seen in the last screenshot.

[ocornut]

Separator() having a vertical effect on layout was changed then reverted very recently because it created backward compatibility issues with existing idioms.

Will probably expose it as a SeparatorFlags later, until then you can use a Dummy() or SetCursorPosY() to manipulate the cursor if needed. Please don’t discuss 2 unrelated issues in same issue #.

[ocornut]

Then your initial question was unclear because you didn’t particularly mention checkbox as the one odd out. Checkbox is not affected by ItemWidth so you can either position it in the middle, or if you want it on the right you have to assume that checkboxes are square where each side == FrameHeight.

Also linking to #395. Note that this isn’t supported at this type of layout puts more burden on clipping and makes it more difficult to have multiple widgets on the same line.

[sdragonx]

why not align label on the left? or use a settings, the label doesn't look good on the right side of the control.

[ElectroGamesDev]

Labels should be aligned to the left of the widget on default, or there should at least be an option for it. I've very rarely seen the label of a widget to the right of it. In most cases, the current implementation of labels with widgets are completely useless and most people just need to render the label and widget separately.

[ocornut]

There’s an issue for that and they are historical reasons for it. Nowadays it would be easier to change as we support cpu side clipping. But I repeat that this layout that everyone wants is much mess flexible as it means you cannot SameLine() additional items into it which is quite a severe constraint, and if you do it may lead to sizing feedback loops.