Can i put UI_template widgets side by side?

i want to put some widgets side by side like this

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 `

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

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.

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

.float-child {
    margin: auto;
    width: 50%;
    float: left;
  <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  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>
1 Like

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