# Change the position of a widget in a dashboard

**URL:** <https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289>\
**Category:** Dashboard\
**Created:** [22 May 2018 07:54 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289 "2018-05-22T07:54:48Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mammoet](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mammoet](https://discourse.nodered.org/u/mammoet)\
**Post date:** [22 May 2018 07:54 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/1 "2018-05-22T07:54:48Z")

</div>

Im am wonderdring if i could change the position of a widget freely. i’m guessing with a template node. but i cant find any exaples on the internet.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [22 May 2018 08:30 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/2 "2018-05-22T08:30:21Z")

</div>

what do you mean freely ? We try to arrange them in order left to right - top to bottom, both widgets within groups and then groups within the page. In the Editor the order can be set how you like.

---

<div class="post-metadata">

**Author:** ![mammoet](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mammoet](https://discourse.nodered.org/u/mammoet)\
**Post date:** [22 May 2018 08:56 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/3 "2018-05-22T08:56:45Z")

</div>

i need a widget to be all the way under in the dash board without any other widgets

---

<div class="post-metadata">

**Author:** ![mammoet](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mammoet](https://discourse.nodered.org/u/mammoet)\
**Post date:** [23 May 2018 07:09 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/4 "2018-05-23T07:09:07Z")

</div>

if anyone knows please let me know

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [23 May 2018 08:04 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/5 "2018-05-23T08:04:29Z")

</div>

Not quite sure what you mean but…  
create a group that is as wide as makes sense to fit the page,  
ensure it is the last group in the dashboard sidebar list  
add whatever widget you want to it.

---

<div class="post-metadata">

**Author:** ![mammoet](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mammoet](https://discourse.nodered.org/u/mammoet)\
**Post date:** [23 May 2018 08:19 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/6 "2018-05-23T08:19:49Z")

</div>

![dashboard](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/082590d48c8cb03bbf401b6e7f2ceacb0dfb1d4c.jpg)

Here you can see a image of my dashboard and i neede to heb the water level to ben in the buttom of the house where you can see the tanks. so i need to some how be able to dynamicly control the widgets position.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [23 May 2018 08:25 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/7 "2018-05-23T08:25:06Z")

</div>

Hi @mammoet

The dashboard layout does not allow for free-form positioning of groups/widgets.

You will need to add placeholder ui\_groups to pad out the empty space to get your water level widgets where you need it to be.

---

<div class="post-metadata">

**Author:** ![mammoet](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mammoet](https://discourse.nodered.org/u/mammoet)\
**Post date:** [23 May 2018 08:36 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/8 "2018-05-23T08:36:12Z")

</div>

okay is it posible to make a widget transparent or some sort?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [23 May 2018 08:58 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/9 "2018-05-23T08:58:03Z")

</div>

If you play with enough CSS via a ui\_template node, then yes probably. Nothing just out of the box. Something like

```
.nr-dashboard-theme ui-card-panel {
    background-color: rgba(255,255,255,0);
}
body.nr-dashboard-theme md-content md-card {
    background-color: rgba(255,255,255,0);
}

```

you’ll have to play around

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [23 May 2018 14:48 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/10 "2018-05-23T14:48:12Z")

</div>

If this was just a basic html page, I would use a CSS `position: absolute` or `position: fixed` style (depending on whether it should scroll with the page or not). Then set its location on the page using `top: 500px; left: 350px;` or whatever I needed. Of course, this would only work if the image is static.

However, since these dashboard widgets are rendered by the Dashboard tab/group logic, I don’t know what would happen to the layout if you pulled some of the parts out of the page flow using absolute/fixed positioning (at a minimum, I’m sure it will make Dave frown ;\*)

But it probably wouldn’t hurt to try – use the Dev Console (F12) to locate the `<div>` of the water level widget, and try modifying its CSS properties in the right-hand panel until it looks right. Then just copy those directives into a `ui_template` node and see what happens…

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [23 May 2018 14:54 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/11 "2018-05-23T14:54:08Z")

</div>

It’s “your” dashboard to do what you want with… I’m not going to frown 🕶

---

<div class="post-metadata">

**Author:** ![Northof49](https://avatars.discourse-cdn.com/v4/letter/n/2acd7d/32.png) [@Northof49](https://discourse.nodered.org/u/Northof49)\
**Post date:** [23 May 2018 16:06 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/12 "2018-05-23T16:06:04Z")

</div>

What are placeholder ui groups?

---

<div class="post-metadata">

**Author:** ![craigcurtin](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@craigcurtin](https://discourse.nodered.org/u/craigcurtin)\
**Post date:** [23 May 2018 16:36 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/13 "2018-05-23T16:36:20Z")

</div>

I remember Peter Scargill got right into this early in the piece with the NR Dashboard and worked out some custom templates etc - you might want to peruse his blog

[https://tech.scargill.net/?s=node-red](https://tech.scargill.net/?s=node-red)

Craig

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [23 May 2018 17:02 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/14 "2018-05-23T17:02:01Z")

</div>

> [@Northof49](#):
>
> What are placeholder ui groups?

Normal ui\_groups that don't contain any widgets and are only there to fill space.

---

<div class="post-metadata">

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\
**Post date:** [12 October 2018 10:52 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/15 "2018-10-12T10:52:10Z")

</div>

Hi,  
I have the same problem as mammoet. So my question is:  
How can I add placeholder ui groups to my dashboard ?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [12 October 2018 12:38 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/16 "2018-10-12T12:38:44Z")

</div>

Hit the Add +group button ?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/66ef3aa2f34602d3337ffaeeb37ae5e85e4034c0.png)

---

<div class="post-metadata">

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\
**Post date:** [12 October 2018 12:48 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/17 "2018-10-12T12:48:58Z")

</div>

That does not work, it's like hiding the group. The group is not visible  
but there's no room between the two other groups

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [12 October 2018 12:53 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/18 "2018-10-12T12:53:59Z")

</div>

Add a text widget into it with no label ?  
Then you can size it however you need

---

<div class="post-metadata">

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\
**Post date:** [12 October 2018 14:12 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/19 "2018-10-12T14:12:30Z")

</div>

![Unbenannt](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1b97cc6b5eea01c9cc7cc89721a44776fc24b89a.png)

it is still not completely invisible

the first is with an empty template in the placeholder ui\_group the second with a text widget.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 October 2018 15:42 UTC](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289/20 "2018-10-12T15:42:48Z")

</div>

You will have to do some looking at the page source with an 'inspector' (for example in FireFox it is under the tools-\>Web Developer-\>Inspector) to fine the ID of the html element. In my case I get  
`<ui-card-panel ng-repeat="group in main.selectedTab.items" id="Home_12345_Group_2" ng-if="group.header &amp;&amp; group.header.config &amp;&amp; !group.header.config.hidden" class="ng-scope visible" style="left: 679.5px; top: 6px;">` so I would use

#Home\_12345\_Group\_2,  
#Home\_12345\_Group\_2 md-card {  
background-color: #000000;  
border-color: #000000;  
color: #000000;  
}

You should also go to the `group` and uncheck the 'display group name` option

[Next page](https://discourse.nodered.org/t/change-the-position-of-a-widget-in-a-dashboard/289.md?page=2)