Adjust Widget Position from Controller in React

Question

Currently, I am trying to change the default position that a widget deploys in from the widget controller. Normally, a widget will appear above the controller (controller positioned at the bottom of the screen). I would like my widget to appear in the top left. I've written this code, which definitely does not seem to be the intended way, and does not quite work:

export default function (props: AllWidgetProps<IMConfig>) {  useEffect(() => {        const elements = document.querySelectorAll('[aria-label="'+props.label+'"]');        elements[1].style.transform = 'translate(0px,0px)'    }, [])...}

This code does position the widget, but when repositioned with the cursor (drag/drop), the widget snaps back to the default position (above the widget controller). Additionally, the only way I could seem to access the widget itself (rather than the controller icon) was through its aria label, which is not ideal. It seems to be something about manipulating the CSS of a Popper element directly creating the issue? Any help would be much appreciated, thank you!

jwilner_amica · Answer

I suppose if section allowed for resize after creation, that would work too, but certainly less ideal (and I would guess, less likely).

jwilner_amica · Answer

After some attempts at 3, your note in parentheses is hitting home. I am thinking fixed panel may be best for now. It would be great if there was any way to allow the user to resize the window once it has been deployed to the panel. Real shot in the dark, but is there a way to do that? Really hope the development team can figure out a solution to this. I appreciate your help.

Jeff.Thompson@arlingtontx.gov_arlingtontx · Answer

As @DavidSolari said, trying to directly manipulate the DOM in React rarely works out well. And the Widget Controller is higher up in the React tree, so it will always keep trying to put the widget back.

I know that being able to set the location of a floating widget is something the Dev team wanted to do, but who knows when it will be released or if they are still working on it.

Here are your current options:

* Use the Fixed Panel option in the Widget Controller.
* Fake a Widget Controller with a Section Widget.
* Modify the Widget Controller. (Keep in mind that the Dev team have worked on this and apparently not figured it out.)