Hello,
I’ve been busy with a widget, but it will not show up correct, or what I’ll expect.
This is the widget code:
<!DOCTYPE html>
<html>
<head>
<style>
#switch_table, #switch_td, #switch_th {
border: 0px;
padding: 3px;
font-size: 16px;
text-align: center;
}
#switch_table {
border-collapse: collapse;
#switch_table, #switch_td, #switch_th {
border: 0px;
padding: 3px;
font-size: 16px;
text-align: center;
}
#switch_table {
border-collapse: collapse;
width: 100%;
}
#switch_row1 {
width: 32px;
}: 100%;
}
#switch_row1 {
width: 32px;
}
</style>
</head>
<body>
<h2>{{config.top_label}}</h2>
<table id="switch_table">
<tr>
<td id="switch_row1">
<span>
<widget-icon iconset="'eclipse-smarthome-classic'" icon="'presence'" size="32" state="itemValue(config.switch1_item)" ng-click="sendCmd(config.switch1_item, (itemValue(config.switch1_item)=='OFF') ? 'ON':'OFF')" />
</widget-icon>
<div ng-if="itemValue('config.switch1_item')=='ON'">
<span style="color: red; font-size: 8pt">thuis</span>
</div>
<div ng-if="itemValue('config.switch1_item')=='OFF'">
<span style="color: green; font-size: 8pt">weg</span>
</div
</span></td>
</tr>
<tr>
<td id="switch_row1">
<span>
<widget-icon iconset="'eclipse-smarthome-classic'" icon="'presence'" size="32" state="itemValue(config.switch2_item)" ng-click="sendCmd(config.switch2_item, (itemValue(config.switch2_item)=='OFF') ? 'ON':'OFF')" />
</widget-icon>
<div ng-if="itemValue('switch2_item')=='ON'">
<span style="color: red; font-size: 8pt">thuis</span>
</div>
<div ng-if="itemValue('switch2_item')=='OFF'">
<span style="color: white; font-size: 8pt">weg</span>
</div
</span></td>
</tr>
</table
</body>
</html>
And this is the output:
What am I doing wrong?