nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Set default size of widget windows within widget Controller

abaldenweck@blm.gov_BLM_EGIS

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?

	Print widget inside controller
	Style page of print widget inside controller
	Style page of print widget outside of controller.

Trouver plus de publications taguées avec

ArcGIS Online

Accepted answers

Shen_Zhang

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.

All comments

JoshConrad1

Hope this is related to what everyone needs help with:

To resize a widget in a widget controller:

1.) Click the Widget Controller

2.) Under the "Appearance" section of the Content tab of the Widget Controller settings, change the Size to "Custom".

3.) Increase/Decrease the Icon Size as desired. Button Size/Spacing seem to be very similar to each other and can be modified after you set the right size of your icons (be sure to modify the Widget Controller size in your page to give your self the room to play with the sizes.

JoshBerna

EDIT: Nevermind this, I was being a goober and trying to resize it in live view.

Hi @Shen_Zhang,

I'm not seeing this behavior with my legend widget contained in a widget controller. I resize the widget to my desired dimensions while editing, save, then preview. In the preview/published item, the widget does not honor the panel size I set, and instead becomes quite larger, so as to completely hide the resizable tool beneath my taskbar (or completely outside the screen when taskbar is hidden). I have to manually fullscreen the experience with keyboard shortcuts just to see the resizable tool. I would prefer for end users to not have to do this.

Is there a way to circumvent this behavior?

resize missing.png

abaldenweck@blm.gov_BLM_EGIS

Well, that does in fact work. Thank you.

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

Shen_Zhang

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.

JeffreyThompson2

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.)

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.