Text of widget not centered when using button action

(Remo) #1

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):
without

result (with button action):
with

Any suggestions ?

0 Likes