Issue aligning elements on opposite ends of a node

[david-pa]

I am working on an existing project utilizing GLSP, and I am having trouble rendering nodes when certain text elements are much longer than previously anticipated.

Currently, the layout behavior is something like this from what I can tell (where List A and List B are composed of small text-based elements):

In the above picture, the result of the elongated list value is okay, but the case where the header is elongated is not.

The alignment of List B is meant to be aligned with the right edge of the node at all times (the text elements are right aligned too) and List A is meant to be similarly aligned to the left. The header seems to stretch the node out to the point where the Properties container is no longer driving the max width of the node, and the Properties container currently doesn't stretch with it.

I'd like to be able to dynamically adjust the hgap in the container to help with this, or find a way to get the property container to take up that extra space. Is there a way to do this, or a recommended adjustment to the current layout I need to make to get the result to get things to be more consistent?

[CamilleLetavernier]

Hi @david-pa ,

The children of VBox and HBox layouts can specify the "hGrab/vGrab" properties. It's a boolean that indicates whether they should be resized along the vertical or horizontal axis when their parent is resized.

In your case, you can apply hGrab=true to either ListA or ListB (or even both; in that case they'll share the remaining space), since all you care about is the spacing between them.

Since they are contained in a properties intermediate container, you will also need to specify hGrab=true on this container. So it should look like this:

• Node (vbox)
  • Header (hbox)
  • Properties (hbox, hGrab=true, hgap=minGap)
    • listA (vbox, hGrab=true)
    • listB (vBox, hGrab=true)

hGrab will have no effect in the "Normal State", nor in the "Elongated List B Values" cases, because there is no extra space to be grabbed for these children (they already take the entire space in their parent). However, for the Elongated Header case, Properties will be extended horizontally to take the entire space in its parent (same width at the header), and listA/listB will then also get some extra space to grab. The remaining space will be shared equally between them (Since listA is left-aligned and listB is right-aligned, it shouldn't matter which one is extended).

[david-pa]

I didn't really see any changes with these settings, but the use of hgap=minGap did kind of squish everything together. So far the only thing that has worked for me is trying to expand the hgap relative to the length of the header text.

[david-pa]

@CamilleLetavernier I know it's been a while and we didn't quite get a resolution on this matter, but I seem to have come across this issue again while working on a new version of this same concept as I'm reusing a lot of the same layout and running into the same problems.

I've composed a diagram again to illustrate the issue with more detail, as I have a better understanding of GLSP since we last talked about this:

Please note that the hGap in the Properties GCompartment is actually dynamically (the number is just a placeholder really) created based on the length of the header text, which may be unnecessary, but has been the main solution until now.

It seems like while your suggestion of using hGrab does help, but there is unused space left that I need the Right Properties GCompartment to use, as the whole Properties GCompartment should be equal to the width of the Parent GNode. I should note that the stretch of the Parent GNode is driven by the size of the Children GCompartment, as the GNode instances within that particular GCompartment can be moved around freely to some extent.

Interestingly, it seems that when there is no Left Properties GCompartment, the Right Properties GCompartment isn't aligned with the right side of the Parent GNode, either.

There aren't any other elements that are children of the Parent GNode, just the Header, Properties, and Children, so I don't think anything is necessarily blocking it, and it does seem to resize with changes in the Children GCompartment, but the only time I can ever get the Right Properties GCompartment to align properly is when the Children GCompartment is not present.

Thank you for any further guidance you can provide.