# Dashboard 2.0 custom ui-widget creation: how to tell size when auto is specified
**URL:** https://discourse.nodered.org/t/dashboard-2-0-custom-ui-widget-creation-how-to-tell-size-when-auto-is-specified/87877
**Category:** General
**Tags:** ui-widgets, dashboard-2
**Created:** [11 May 2024 15:24 UTC](https://discourse.nodered.org/t/dashboard-2-0-custom-ui-widget-creation-how-to-tell-size-when-auto-is-specified/87877 "2024-05-11T15:24:25Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [11 May 2024 15:24 UTC](https://discourse.nodered.org/t/dashboard-2-0-custom-ui-widget-creation-how-to-tell-size-when-auto-is-specified/87877/1 "2024-05-11T15:24:25Z")
I am creating (or attempting to create) a custom D2 ui-widget. I need to know the actual size (eg 4x3). If the user specifies a size then width and height are available in `this.props`, but if it is configured as auto then these are both 0. Is it possible to determine the actual size, or at least the width, in which case the height is up to me I suppose?
I assume that what I need is the group width, `this.props` has the group id, and in the browser console I see `ui-config received` and details of all the groups, including the width, but I don't know how to access the ui-config object from my code.
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [12 May 2024 07:48 UTC](https://discourse.nodered.org/t/dashboard-2-0-custom-ui-widget-creation-how-to-tell-size-when-auto-is-specified/87877/2 "2024-05-12T07:48:22Z")
This wasn't how I planned on it being used, but there is a store available with the `ui-config`. To access it, you can do so similarly to how we access the `data` stores with the `messages` state. In this case, we can get, from the `ui` store, the `groups` store, so:
```vue
computed: {
...mapState('data', ['messages']),
...mapState('ui', ['groups']),
},
```
Then, you'll be able to access the map of groups anywhere in your vue app with `this.groups`.
Will ask though, _why_ do you ened to know the group width? If for styling pruposes, CSS should be able to handle that for you with %-based styling?
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [12 May 2024 09:34 UTC](https://discourse.nodered.org/t/dashboard-2-0-custom-ui-widget-creation-how-to-tell-size-when-auto-is-specified/87877/3 "2024-05-12T09:34:49Z")
> [@joepavitt](#):
>
> _why_ do you ened to know the group width?
Actually, I have just realised that I don't need the width. I thought I needed the ui-node width (which I think is the group width when auto is specified. I am displaying some svg in the node and have to adjust it to fit the aspect ratio of the node. My calcs for aspect ratio was failing, obviously, when the size came in a 0 (or sometimes null), so I thought I needed the group width, but actually I just want an aspect ratio of 1:1 in that case, and don't need to do the calcs at all.
Sorry to have wasted your time.
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [12 May 2024 09:47 UTC](https://discourse.nodered.org/t/dashboard-2-0-custom-ui-widget-creation-how-to-tell-size-when-auto-is-specified/87877/4 "2024-05-12T09:47:58Z")
Hi @Colin,
Like Joe mentioned the %-syntax is normally sufficient.
Just adding something here for completeness (for edge cases). In the heatmap node I also use all available space:
```auto
```
But the library that I am using requires me to draw on specific coordinates. Which I don't know in advance. To make a long story short, I [re-calculate](https://github.com/bartbutenaers/node-red-dashboard/blob/heatmap-widget/ui/src/widgets/ui-heatmap/UIHeatmap.vue#L55) the coordinates based on the actual width of my widget inside the dashboard:
```auto
this.cellWidth = this.$refs.heatmap_container.clientWidth / (parseInt(this.props.columns));
this.cellHeight = this.$refs.heatmap_container.clientHeight / (parseInt(this.props.rows));
```
Note that I call this code in the mount event, which means it is only correct at the start. But not if the width changes. Need to fix that some time, if I ever get to it...
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [12 May 2024 11:19 UTC](https://discourse.nodered.org/t/dashboard-2-0-custom-ui-widget-creation-how-to-tell-size-when-auto-is-specified/87877/5 "2024-05-12T11:19:05Z")
> [@BartButenaers](#):
>
> But the library that I am using requires me to draw on specific coordinates. Which I don't know in advance. To make a long story short, I [re-calculate](https://github.com/bartbutenaers/node-red-dashboard/blob/heatmap-widget/ui/src/widgets/ui-heatmap/UIHeatmap.vue#L55) the coordinates based on the actual width of my widget inside the dashboard:
OK, thanks. That could be useful to know. In fact all I need is the aspect ratio, so if the user sets the size to auto I can make the widget square, which is fine.
---
### Author:  [@kevinGodell](https://discourse.nodered.org/u/kevinGodell)
#### Post date: [12 May 2024 13:12 UTC](https://discourse.nodered.org/t/dashboard-2-0-custom-ui-widget-creation-how-to-tell-size-when-auto-is-specified/87877/6 "2024-05-12T13:12:08Z")
> [@BartButenaers](#):
>
> Note that I call this code in the mount event, which means it is only correct at the start. But not if the width changes. Need to fix that some time, if I ever get to it...
I was previously trying to track the size changes for my experiment using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) until i found the css that worked instead. This might work for you.
```auto
const resizeObserver = new ResizeObserver((entries) => {
console.log(entries);
});
resizeObserver.observe(theHtmlElement);
```
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [14 May 2024 08:44 UTC](https://discourse.nodered.org/t/dashboard-2-0-custom-ui-widget-creation-how-to-tell-size-when-auto-is-specified/87877/7 "2024-05-14T08:44:48Z")
> [@Colin](#):
>
> Sorry to have wasted your time.
No time wasted at all Colin
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [12 August 2024 08:45 UTC](https://discourse.nodered.org/t/dashboard-2-0-custom-ui-widget-creation-how-to-tell-size-when-auto-is-specified/87877/8 "2024-08-12T08:45:22Z")
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.