Widget resize event

Forum
1

Hi,

I’m trying to make my custom element responsive based on widget size. But I’m not aware how to get the widget resize event. Could anyone help me here please?

2

Hi Bishan,

There are different approaches to this.
Ideally you wouldn’t need to catch any resize event as your widget would be implemented in a responsive way that would just adapt to changing width and height via CSS.

Some of the community widgets are using the angular-resize-event package to get the size changes e.g. the cumulocity-layered-map-widget-plugin.

Within Cumulocity, we are using dependency injection to get the DashboardChildComponent (Web SDK documentation) which wraps around the widgets component. It offers an changeEnd EventEmitter.
You can subscribe to this EventEmitter and filter for lastChange to equal resize.
Note that this approach will only inform you about directly resizing the widget via the functionality in the bottom right corner of the widget. If the widget width increases because you increased the browsers window size, this EventEmitter won’t notify you.

Regards,
Tristan

1 Like
3

Hi Tristan,

Thanks for the information.

~WRD0000.jpg
~WRD0000.jpg100×100 357 Bytes

image001.png

image002.png
image002.png400×400 2.08 KB

image003.png

image005.png

image006.png

image007.png

image008.jpg

image004.png

4

Hi Tristan,
Using angular-resize-event package does the trick provided the height as 100% to parent element.

Thanks for the suggestion!

5

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.