# A Layout that i need

**URL:** <https://discourse.nodered.org/t/a-layout-that-i-need/8587>\
**Category:** Dashboard\
**Created:** [4 March 2019 08:55 UTC](https://discourse.nodered.org/t/a-layout-that-i-need/8587 "2019-03-04T08:55:30Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![pumper](https://avatars.discourse-cdn.com/v4/letter/p/bb73d2/32.png) [@pumper](https://discourse.nodered.org/u/pumper)\
**Post date:** [4 March 2019 08:55 UTC](https://discourse.nodered.org/t/a-layout-that-i-need/8587/1 "2019-03-04T08:55:30Z")

</div>

Hi I want a ui laout like this:

 ![layout](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f3b687db74a09f28c96646546596bd19dede5755.png)  
how can I design this using dashboard or template node?

---

<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:** [5 March 2019 23:41 UTC](https://discourse.nodered.org/t/a-layout-that-i-need/8587/2 "2019-03-05T23:41:52Z")

</div>

You have to manually set the widths of the groups you need to suit/fit your screen  
see [https://flows.nodered.org/node/node-red-dashboard#layout](https://flows.nodered.org/node/node-red-dashboard#layout)  
I would start by leaving the first group as 6 wide then change the second to see what sizes fits - may 14 or 18 or... you will have to figure it out.

---

<div class="post-metadata">

**Author:** ![pumper](https://avatars.discourse-cdn.com/v4/letter/p/bb73d2/32.png) [@pumper](https://discourse.nodered.org/u/pumper)\
**Post date:** [6 March 2019 14:35 UTC](https://discourse.nodered.org/t/a-layout-that-i-need/8587/3 "2019-03-06T14:35:01Z")

</div>

it works only if i keep browser in maximized.if i change browser size the second group moves to the down of first group. is there a way to keep it orgenised in all situations?(something like i tell dashboard to give first group 30% of screen and to the second one 70%)?

---

<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:** [6 March 2019 19:56 UTC](https://discourse.nodered.org/t/a-layout-that-i-need/8587/4 "2019-03-06T19:56:03Z")

</div>

No, this dashboard is based on a fixed grid. Other options like ui-builder allow you to create a dashboard with whatever flexibility you wish as you can use whatever building tools or library you wish.

---

<div class="post-metadata">

**Author:** ![pumper](https://avatars.discourse-cdn.com/v4/letter/p/bb73d2/32.png) [@pumper](https://discourse.nodered.org/u/pumper)\
**Post date:** [8 March 2019 07:54 UTC](https://discourse.nodered.org/t/a-layout-that-i-need/8587/5 "2019-03-08T07:54:14Z")

</div>

thanks for the reply.  
is this possible to use dashboarditems in the ui-builder?

---

<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:** [8 March 2019 10:51 UTC](https://discourse.nodered.org/t/a-layout-that-i-need/8587/6 "2019-03-08T10:51:18Z")

</div>

no - that is the downside... you have total control and have to totally build it yourself.

---

<div class="post-metadata">

**Author:** ![pumper](https://avatars.discourse-cdn.com/v4/letter/p/bb73d2/32.png) [@pumper](https://discourse.nodered.org/u/pumper)\
**Post date:** [9 March 2019 06:55 UTC](https://discourse.nodered.org/t/a-layout-that-i-need/8587/7 "2019-03-09T06:55:39Z")

</div>

thanks for reply.  
but my problem is that i need to show worldmap in the main area. and i want to use  
node-red-contrib-web-worldmap beacause it is easy to use and ready for send/receive messages.  
is there a way to use this node inside uibuilder?

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [9 March 2019 07:09 UTC](https://discourse.nodered.org/t/a-layout-that-i-need/8587/8 "2019-03-09T07:09:21Z")

</div>

you should be able to use an iframe