[SOLVED] Custom widget looks different on different scales

Hi,

I’ve just started to experiment with custom widgets for Habpanel. I’m only learning CSS, although I’ve been using OH for 3 years already.
My problem is the following: I have a custom widget, which I created, but if I use the “absolute” positions, it still looks different when I look at the Preview and the Panel.
Could someone give me a clue what am I doing wrong? Thank you!

In Preview mode:

In Panel mode:

<div ng-if="itemValue('InkomDoor')!='open'">
  <widget-text size="32"
  style="position: absolute;
  background: rgba(0,255,0,0.5);
  border-radius: 10px;
  top: 0px; left: 10px;
  width: 80px; height: 30px"
  />
	<td><strong>{{itemValue('InkomDoor')}}</strong></td>
</div>
<div ng-if="itemValue('InkomDoor')=='open'">
  <widget-text size="32"
  style="position: absolute;
  background: rgba(255,0,0,0.5);
  border-radius: 10px;
  top: 0px; left: 10px;
  width: 80px; height: 30px"
  />
	<td><strong>{{itemValue('InkomDoor')}}</strong></td>
</div>
<div>
  <widget-text size="12"; font-size: 1.5vw
  style="position: absolute;
  top: 30px; left: -15px;
  width: 200px; height: 30px"
  />
  <td><strong>{{itemValue('InkomDoorTime').split('.')[0]}}</strong></td>
</div>

<div ng-if="itemValue('InkomWindow')!='open'">
<div class="row">
  <widget-text size="32"
  style="position: absolute;
  background: rgba(0,255,0,0.5);
  border-radius: 10px;
  top: 0px; left: 190px;
  width: 120px; height: 30px"
  />
	<td><strong>{{itemValue('InkomWindow')}}</strong></td>
	</div>
</div>
<div ng-if="itemValue('InkomWindow')=='open'">
<div class="row">
  <widget-text size="32"
  style="position: absolute;
  background: rgba(255,0,0,0.5);
  border-radius: 10px;
  top: 0px; left: 190px;
  width: 120px; height: 30px"
  />
	<td><strong>{{itemValue('InkomWindow')}}</strong></td>
	</div>
</div>

<div class="row">
  <div class="col-xs-4"><span><widget-icon iconset="'smarthome-set'" icon="'temperature'" /></span>Temperature</div>
  <div class="col-xs-4"><span><widget-icon iconset="'smarthome-set'" icon="'drop'" /></span>Humidity</div>
  <div class="col-xs-4"><span><widget-icon iconset="'smarthome-set'" icon="'thermostat'" /></span>Pressure</div>
</div>

<div class="row">
  <div class="col-xs-4"><span style="color: red; font-size: 14pt">{{itemValue('StaircaseTemp')}}°C</span></div>
  <div class="col-xs-4"><span style="color: cyan; font-size: 14pt">{{itemValue('StaircaseHum')}}%</span></div>
  <div class="col-xs-4">
<span style="color: green; font-size: 14pt">
		{{'%.02f' | sprintf:itemValue('BedRoomOnePres') /100}}<small style="font-size:8pt">hPa</small>
</span>
  </div>
</div>

<table class="table">
  <tr>
<td class="text-left">Sunrise:</td>
<td><strong>{{itemValue('Sunrise_Time') | date:'HH:mm'}}</strong></td><td class="text-left">Sunset:</td><td><strong>{{itemValue('Sunset_Time') | date:'HH:mm'}}</strong></td>
  </tr>
</table>

<div ng-if="itemValue('KitchenInkomDoorStrZB')!='true'">
  <div class="row">
<widget-text size="32"
style="position: absolute;
background: rgba(255,0,0,0.5);
border-radius: 10px;
top: 310px; left: 40px;
width: 80px; height: 20px"
/>
  <td><strong>closed</strong></td>
  </div>
</div>

<div ng-if="itemValue('KitchenInkomDoorStrZB')=='true'">
  <div class="row">
<widget-text size="32"
style="position: absolute;
background: rgba(0,255,0,0.5);
border-radius: 10px;
top: 310px; left: 40px;
width: 80px; height: 20px"
/>
  <td><strong>open</strong></td>
  </div>
</div>

<div ng-if="itemValue('LivingInkomDoorStrZB')!='true'">
  <div class="row">
<widget-text size="32"
style="position: absolute;
background: rgba(255,0,0,0.5);
border-radius: 10px;
top: 50px; left: 0px;
width: 10px; height: 80px"
/>
 <td><strong>c<br>l<br>o<br>s<br>e<br>d</br></strong></td>
  </div>
</div>


<div ng-if="itemValue('LivingInkomDoorStrZB')=='true'">
  <div class="row">
<widget-text size="32"
style="position: absolute;
background: rgba(0,255,0,0.5);
border-radius: 10px;
top: 50px; left: 0px;
width: 20px; height: 80px"
/>
<td><strong>o<br>p<br>e<br>n</br></strong></td>
  </div>
</div>


<div ng-if="itemValue('IRInkom')!='1'">
  <widget-text size="32"
  style="position: absolute;
  background: rgba(0,255,0,0.5);
  border-radius: 5px;
  top: 280px; left: 6px;
  width: 90px; height: 20px"
  />
	<td><strong>no movement</strong></td>
</div>
<div ng-if="itemValue('IRInkom')=='1'">
  <widget-text size="32"
  style="position: absolute;
  background: rgba(255,0,0,0.5);
  border-radius: 5px;
  top: 280px; left: 6px;
  width: 90px; height: 20px"
  />
	<td><strong>movement</strong></td>
</div>
<div>
  <widget-text size="12"
  style="position: absolute;
  top: 280px; left: 80px;
  width: 200px; height: 30px"
  />
  <td><strong>{{itemValue('IRInkomTime').split('.')[0]}}</strong></td>
</div>

Okay, I got this figured out to a certain extent. So…
Let’s say you want to create a window which is closer to the left end of the wall. Use absolute position and top/left.

<div ng-if="itemValue('LivingFLwindow')!='open'">
  <widget-text size="32"
  style="position: absolute;
  background: rgba(0,255,0,0.5);
  border-radius: 10px;
  top: 15px; left: 50px;
  width: 70px; height: 20px"
  />
	<td><strong>{{itemValue('LivingFLwindow')}}</strong></td>
</div>
<div ng-if="itemValue('LivingFLwindow')=='open'">
  <widget-text size="32"
  style="position: absolute;
  background: rgba(255,0,0,0.5);
  border-radius: 20px;
  top: 15px; left: 50px;
  width: 70px; height: 20px"
  />
	<td><strong>{{itemValue('LivingFLwindow')}}</strong></td>
</div>

image

Then let’s see the one on the right side. Lock it to top and right, this way it will always follow the top and right edge when you resize the window.

<div ng-if="itemValue('LivingFRwindow')!='open'">
<div class="row">
  <widget-text size="32"
  style="position: absolute;
  background: rgba(0,255,0,0.5);
  border-radius: 10px;
  top: 15px; right: 30px;
  width: 70px; height: 20px"
  />
	<td><strong>{{itemValue('LivingFRwindow')}}</strong></td>
	</div>
</div>
<div ng-if="itemValue('LivingFRwindow')=='open'">
<div class="row">
  <widget-text size="32"
  style="position: absolute;
  background: rgba(255,0,0,0.5);
  border-radius: 10px;
  top: 15px; right: 30px;
  width: 70px; height: 20px"
  />
	<td><strong>{{itemValue('LivingFRwindow')}}</strong></td>
	</div>
</div>

Okay, now let’s see the one in the middle on the left edge. You can lock that to either to the top or the bottom, your preference. I have locked it to the top, because it shouldn’t move anyway. The important bit is to lock it to the left, so it stays on the left wall.

<div ng-if="itemValue('LivingSidewindow')!='open'">
  <div class="row">
    <widget-text size="32"
    style="position: absolute;
    background: rgba(0,255,0,0.5);
    border-radius: 10px;
    top: 160px; left: 15px;
    width: 15px; height: 120px"
    />
     <td><strong>c<br>l<br>o<br>s<br>e<br>d</br></strong></td>
    </div>
</div>
<div ng-if="itemValue('LivingSidewindow')=='open'">
  <div class="row">
    <widget-text size="32"
    style="position: absolute;
    background: rgba(255,0,0.5);
    border-radius: 10px;
    top: 160px; left: 15px;
    width: 15px; height: 120px"
    />
    <td><strong>o<br>p<br>e<br>n</br></strong></td>
  </div>
</div>

I hope it helps someone, I’ve literally Googled half the internet without success, but then it worked out by trial and error :slight_smile: