Label/widget layout combinaisons

[ocornut]

Followup on what I mentioned in #259

Allow all "value - label" widgets to be displayable in a variety of combination (e.g. "label widget", "label\nwidget" with variety of expressive layout options and alignments. Devise better methods to express and manipulate the size and alignment of one or multiple widgets. Currently the PushItemWidth(...); Widget(); PopItemWidth() idiom is way too verbose. Enable simpler and better horizontal layout.

I'll try to be working on that next. If you have any feedback/idea.
Note this only concern layout within the simple "big" widgets that are typically composed of a title and a frame with content edition.

• One of the advantage of the current "widget - label" scheme is that by using an empty label we can have "widget" and then SameLine() and add other stuff.
  If we have a "label - widget" label it assume that label is contained within a given width. There are times where you may want to omit the label and keep the extra spacing on the left side, but if you are trying to fit multiple widgets on a sameline the space wouldn't make sense.
  One easy way I thought we could allow for both case would be to consider than an empty visible label, e.g. "" or "##hiddenstuff" would ignore the extra spacing on the left-side, but a single space label e.g. " " or " ##hiddenstuff" would keep that spacing on the left-side.

Other desirable features:

• Be able to drag and resize the separating column between widget and label. That's a fairly obvious desirable thing in the case of laying out a bunch of those widgets vertically (the typical "property editor" way), as discussed in Widget width (was: Text being clipped by the Window edge) #267. But for other cases such as laying multiple widgets in a row, manipulating ItemWidth, etc.
• For label that are clipped on the right side (either by the right-side of the window edge in widget-label mode, either by the widget in label-width mode), we could have a sort of non-intrusive tooltip system, where if you keep the mouse still for a second the full label gets drawn in the same position but unclipped.
• Probably lots of other cases to discuss (with come in later).

[zwcloud]

Some thoughts about this on ux.stackexchange.com.

[johanwendin]

This thread isn't specifically about checkboxes though - it's about the option for all (or most) of the controls to have the label on the left side. (like the group label (third box of third answer by DA01 in the thread you linked)

Basically a simple way to mimic an HTML table with tr, th (?), td where the first column contains the labels (or anything really, depending on which direction Omar wants to take it) and the next the widget (or multiples with sameline or even more TDs would help.

ImGui::Group can be used as long as all the widgets have the same height, but that's rarely the case I find. :) Child windows can work too, but it's tricky to keep them scrolled in sync etc.

[ocornut]

FYI I had a stash with a prototype of that working but there was some unsolved problems. The stash was hard to merge. One problem was the worry that people are tempted by blindly adopti Label-Widget without thinking twice, whereas Widget-Label has many advantages.

It isn't a priority but I would like to resume that work later.

[meshula]

Although there are arguable merits for l/w or w/l, sometimes you are implementing a design by a designer, and I think in that common case we programmers have to abuse columns and patch widgets as necessary to make them not reserve space for a label. I would like to not have to do that any more :)

[ocornut]

Columns are very weak at the moment, sorry. Will work on improving all those things.
I think encouraging the use of primitives to easily render clipped text would also be useful.

It would allow quick combinations of TextClipped() (with given width) + SameLine + Widget to be locally used when for some reason columns are not practical (perhaps for single items, interleaved with non-columned items - merging cells? etc.)
Combined with a moveable vertical separator it may be a good way to create custom columns.

[lukeramsden]

Any progress on this?

[ocornut]

Any progress on this?

Not yet.!

[Thraka]

Is it possible to hide labels? That may be a quicker enhancement to do that doesn't require much extra coding.

For example, I have an input box and I use a colored text element before the box, now all I need to do is hide the label the box displays.

[ocornut]

Please read the FAQ.

[Thraka]

Beautiful! Thanks!!