Set default size of widget windows within widget Controller

913
3
Jump to solution
05-19-2023 11:40 AM
Labels (1)
AlfredBaldenweck
MVP Regular Contributor

HI all,

I'm trying to make an experience using widgets in a widget controller widget.

Unfortunately, widgets within the controller seem to be unable to have their sizes set, meaning that you have to manually resize them whenever you open them, or scroll down. This is kind of awful.

I was wondering if there was a way to set default sizes like you can when they're not in a widget controller?

AlfredBaldenweck_0-1684521501610.pngPrint widget inside controller
AlfredBaldenweck_1-1684521522853.png

 

Style page of print widget inside controller
AlfredBaldenweck_2-1684521561737.png

 

Style page of print widget outside of controller.

 

0 Kudos
1 Solution

Accepted Solutions
Shen_Zhang
Esri Contributor

Hi @AlfredBaldenweck 

You can try using resizable tool on the bottom left corner of the widget panel to resize, and save the app. Panel size can be remembered, but not for the position at the moment.

Shen Zhang

View solution in original post

0 Kudos
3 Replies
JeffreyThompson2
MVP Regular Contributor

As far as, I can tell it is not possible and it really should be. Or at least the widget controller modal should honor the default size of the widget in its config file, but unfortunately the widget controller overwrites this with inline css.

Yesterday, I came up with a work-around, but it incorporates several React anti-patterns: directly altering the DOM and children altering parents. I think it's harmless in this case, but it may have some unintended side-effects.

1. Copy the widget you want to change the size of into your custom widgets folder.

2. In the manifest.json of that widget, add a jQuery CDN as a dependency.

3. Add a class to the top div of your widget.

4. Inside a useEffect function that loads when the widget starts add 

$('.your-class').parents('.single-widget-launcher').addClass('your-class-two')

I'm using a single widget launcher, if you are using multi-widget, this will need to find the right class name for that.

5. Add a css file and adjust the size of the widget in .your-class-two 

(You will need to mark your css with !important to override the inline css that the widget controller uses.)

GIS Developer
City of Arlington, Texas
Shen_Zhang
Esri Contributor

Hi @AlfredBaldenweck 

You can try using resizable tool on the bottom left corner of the widget panel to resize, and save the app. Panel size can be remembered, but not for the position at the moment.

Shen Zhang
0 Kudos
AlfredBaldenweck
MVP Regular Contributor

Well, that does in fact work. Thank you.

Still weird that you can't set it from the Style page, too.

0 Kudos