How can I make a custom Widget responsive on Arcgis Experience Builder client and server?

RomaGSYS

Hello,

I am trying to create a responsive widget for arcgis experience builder that I created using TypeScript and React. The widget is working properly on the default size (or if the user zooms in or zooms out). The problem I have is that if the final user changes the size of the widget, all of the css I configured to make it responsive suddenly stops working.

I also tried to create several functions in the tsx code in order to capture if the user shrinks or makes the widget bigger after placing it on the map, but they did not work.

"NormalWindowSizeView" is how it looks if the user entered the widget in different sizes, as you can see, the widget looks very weird.

"ShrinkedWindowSizeView" is how the widget looks if the user shrinks the size of the window, the responsiveness start.

NormalWindowSizeView-CustomWIdget.jpg

ShrinkedlWindowSizeView-CustomWIdget.jpg

Jeff.Thompson@arlingtontx.gov_arlingtontx

Are you using a widget controller or not? This may change what options are available to you.

How are you targeting your css? If you are creating your own class names and ids, then you shouldn't have any problem controlling them with your own css. If you are trying to overwrite ESRI css, remember that all sorts of interactions will cause Experience Builder to add/remove class names.

Can you take advantage of the responsiveness built-in to the Builder mode? Set your widget size to percentages in the Builder and then use percentage base sizes in your css.

You will struggle to make your own event listeners to check if a widget is resized because of the way React uses the Virtual DOM, but the size of the widget should be available to you somewhere in props.