The text is not centered when the widget has a defined button with an action.
Heres my HabPanel code:
<div class="row" ng-if="itemValue('MyStromWaschmaschine_State')=='LÄUFT'">
<div
ng-style="{
'background-color': itemValue('MyStromWaschmaschine_State')=='LÄUFT' ? '#064AFF': '#223344'
}"
class="template-container"
style="top:0;bottom:0;left:0;right:0;position:absolute">
<div class="template-contents">
</div>
</div>
<div class="row">
<div class="col-xs-12"><span style="color: #FFFFFF; font-size: 10pt; text-align:center">Waschmaschine<small style="font-size:8pt"></small></span></div>
</div>
<div class="col-xs-12"><span style="color: #00ccff; font-size: 24pt; text-align:center">{{itemValue('MyStromWaschmaschine_State')}}</span></div>
</div>
<div class="row" ng-if="itemValue('MyStromWaschmaschine_State')=='FERTIG'">
<button class="btn btn-lg" ng-click="sendCmd('MyStromWaschmaschine_State', 0)">
<div
ng-style="{
'background-color': itemValue('MyStromWaschmaschine_State')=='FERTIG' ? '#30FF06': '#223344'
}"
class="template-container"
style="top:0;bottom:0;left:0;right:0;position:absolute">
<div class="template-contents">
</div>
</div>
<div class="row">
<div class="col-xs-12"><span style="color: #FFFFFF; font-size: 10pt; text-align:center">Waschmaschine<small style="font-size:8pt"></small></span></div>
</div>
<div class="col-xs-12"><span style="color: #00ccff; font-size: 24pt; text-align:center">{{itemValue('MyStromWaschmaschine_State')}}</span></div>
</button>
</div>
<div class="row" ng-if="itemValue('MyStromWaschmaschine_State')=='AUS'">
<div
ng-style="{
'background-color': itemValue('MyStromWaschmaschine_State')=='AUS' ? '#223344': '#223344'
}"
class="template-container"
style="top:0;bottom:0;left:0;right:0;position:absolute">
<div class="template-contents">
</div>
</div>
<div class="row">
<div class="col-xs-12"><span style="color: #FFFFFF; font-size: 10pt; text-align:center">Waschmaschine<small style="font-size:8pt"></small></span></div>
</div>
<div class="col-xs-12"><span style="color: #00ccff; font-size: 24pt; text-align:center">{{itemValue('MyStromWaschmaschine_State')}}</span></div>
</div>
<div class="row" ng-if="itemValue('MyStromWaschmaschine_State')=='STANDBY'">
<div
ng-style="{
'background-color': itemValue('MyStromWaschmaschine_State')=='STANDBY' ? '#223344': '#223344'
}"
class="template-container"
style="top:0;bottom:0;left:0;right:0;position:absolute">
<div class="template-contents">
</div>
</div>
<div class="row">
<div class="col-xs-12"><span style="color: #FFFFFF; font-size: 10pt; text-align:center">Waschmaschine<small style="font-size:8pt"></small></span></div>
</div>
<div class="col-xs-12"><span style="color: #00ccff; font-size: 24pt; text-align:center">{{itemValue('MyStromWaschmaschine_State')}}</span></div>
</div>
result (without button action):
result (with button action):
Any suggestions ?