# Can i put UI\_template widgets side by side?

**URL:** https://discourse.nodered.org/t/can-i-put-ui-template-widgets-side-by-side/70022
**Category:** General
**Created:** [3 November 2022 13:01 UTC](https://discourse.nodered.org/t/can-i-put-ui-template-widgets-side-by-side/70022 "2022-11-03T13:01:50Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Henrique](https://avatars.discourse-cdn.com/v4/letter/h/ecb155/32.png) [@Henrique](https://discourse.nodered.org/u/Henrique)
#### Post date: [3 November 2022 13:01 UTC](https://discourse.nodered.org/t/can-i-put-ui-template-widgets-side-by-side/70022/1 "2022-11-03T13:01:50Z")

</div>

i want to put some widgets side by side like this

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/11f5fad14ddd0615c8eb4f0cb61061bbf9c057bc.png)

in this html example i used the inline-block in css but how i do this on ui\_template? already tried doing the same script `  
div{  
display:inline-block;  
}

```
Molde1 Peso Corpo
<div id='mpc1' ng-bind-html="msg.payload[0]"></div><br>
Molde1 Peso Ombro
<div id='mpo1' ng-bind-html="msg.payload[1]"></div><br>
Molde1 peso Base
<div id='mpb1' ng-bind-html="msg.payload[2]"></div><br><br>

```

```
molde2 Peso Corpo
<div id='mpc2' ng-bind-html="msg.payload[3]"></div><br>
molde2 Peso Ombro
<div id='mpo2' ng-bind-html="msg.payload[4]"></div><br>
molde2 peso Base
<div id='mpb2' ng-bind-html="msg.payload[5]"></div><br><br>

```

`

but still is in one row

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/1/8133024ef4b281f8c91d653ef0b8bf2efa7b055e.png)

---

<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: [3 November 2022 13:41 UTC](https://discourse.nodered.org/t/can-i-put-ui-template-widgets-side-by-side/70022/2 "2022-11-03T13:41:21Z")

</div>

What have you got the group width set to in the ui-template configuration?

1. open the ui-template node
2. click the pencil icon to the right of the 'group' option
3. what is the width set to?

The width will be the space that the ui-nodes will fit in.

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [3 November 2022 13:52 UTC](https://discourse.nodered.org/t/can-i-put-ui-template-widgets-side-by-side/70022/3 "2022-11-03T13:52:22Z")

</div>

To display the second set of div's to the right you can use css. There are a few methods for this, search `display html elements inline css`  
e.g.

```auto
<style>
.float-child {
    margin: auto;
    width: 50%;
    float: left;
}  
</style>
<div>
  <div class="float-child">
    <div id='mpc1'>Molde1 Peso Corpo {{msg.payload[0]}}</div>
    <div id='mpo1'>Molde1 Peso Ombro {{msg.payload[1]}}</div>
    <div id='mpb1'>Molde1 peso Base {{msg.payload[2]}}</div>
  </div>
  <div class="float-child">
    <div id='mpc1'>Molde2 Peso Corpo {{msg.payload[3]}}</div>
    <div id='mpo1'>Molde2 Peso Ombro {{msg.payload[4]}}</div>
    <div id='mpb1'>Molde2 peso Base {{msg.payload[5]}}</div>
  </div>
</div>

```

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [17 November 2022 13:52 UTC](https://discourse.nodered.org/t/can-i-put-ui-template-widgets-side-by-side/70022/4 "2022-11-17T13:52:52Z")

</div>

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