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>