Anchor widget's position to another widget and/or at a specific point relative to?

Community Usage questions
,
1

Is there anyway to achieve anchoring a widget's position to a specific relative point to another widget's position?

Either through the client builder or using JS through the custom module?

My goal is as described in the picture below, to create little sub menu buttons on these tab widgets. So, the user can switch between the tabs to set/select velocity, OR, by clicking the tiny hamburger menu's , they can open the full panel of all the velocity selections.

image
image563×724 19.4 KB

Right now, I'm just manually positioning it there, but when moving the object or on some of my touch screens the position starts to sway, depending on the screen size. For example:

image

Cheers,
DMDComposer

2

You could use a modal widget with relative (under geometry) set to true.

3

The modal widget's popup can be anchored using relative set to true. However, I'm specifically talking about the modal widget's button position, not the modal's popup window position. Is the modal widget's button position possible to be anchored relatively to another widget's position?

Unless, I'm misinterpreting your answer?

4

Ah... no you can't. If you want a responsive layout you should use vertical/horizontal/grid panels.

1 Like
5

Not sure if this is the "cleanest" solution, as CSS is the bane of my existence. :upside_down_face:

I threw everything into it's own panel with layout set to grid and gridTemplate set to the following:

"a b c d e f g" auto

Basically using "a" and "g" as the far ends, then just shrinking the height of the menu button.

/* CSS for velocity tab panel */
:host {
  grid-area: a;
  grid-column: 1 / -1;
}

/* CSS for SET hamburger menu */
:host {
  z-index: 99;
  grid-area: a;
   /* height of the panel TAB, and have to use important */
  height: 26rem !important;
}


/* CSS for SEL hamburger menu */
:host {
  z-index: 99;
  grid-area: g;
  /* height of the panel TAB, and have to use important */
  height: 26rem !important;
}

That seems to have given me the best results with different screens, and it anchors to the top left / right corners.

Thank you for your suggestion Jean, cheers!