Own widget with background color

1

I want to create a widget that depends on a Switch (ON / OFF) the background color changes.

<div class="box-Content Switch" style="background-Color: red" ng-if="item('Dummy_Test')=='ON'">
Hello
</div>

<div class="box-Content Switch" style="background-Color: green" ng-if="item('Dummy_Test')=='OFF'">
Hello
</div>

So only the text is deposited but still the complete widget.
What do I have to change?

2

For me it works this way:

<style>
 .garage { 
    vertical-align:center;
    width:98px;
    height:98px;
    text-align: center;
    font-size: 12pt;
    border : 0;
    }
</style>

<div ng-if="itemState('Gate_Show_OC',true)==2">
  <button class="garage" style="background: red;" ng-click="sendCmd('Garage', 'ON')">
  Garage ist offen
  </button>
</div>
...
3

Ok that’s a start. Here are unfortunately only the height and width registered as a fixed value, I would like for the height and width like to have 100%. if I enter that at the height, it is only as high as the text is.

height:100%;

4

Did you add the “true” state to your item?
Otherwise I have no idea, I found my solution through trial and error :grinning:

5

The item property is actually completely uninteresting. This is about the fact that the div apparently still sets a Rahem drum or does not accept the heigth settings. I always have a black frame drum and working with absolute numbers is not exactly optimal with such a dymamic system. Since it works with the ready-made widget “schaltfläche” yes must be possible.

6

Correct, my bad:

7

It is with Firefox 66.0.3 and also with the Android 8 with chrome 74.0.3729.112. The problem is the same with both.
The problems are not in the displayed values ​​but in the complete background of the widget. I suggest that it is the DIV Object is here may have to be used a different class or a corresponding style.

8

This is my code

<style>
 .garage { 
    vertical-align:center;
    width:98px;
    height:98px;
    text-align: center;
    font-size: 12pt;
    border : 0;
    }
</style>

<div ng-if="itemState('Gate_Show_OC',true)==2">
  <button class="garage" style="background: red;" ng-click="sendCmd('Garage', 'ON')">
  Garage ist offen
  </button>
</div>

<div ng-if="itemState('Gate_Show_OC',true)==1">
  <button class="garage" style="background: green;" ng-click="sendCmd('Garage', 'ON')">
  Garage ist zu!
  </button>
</div>

<div ng-if="itemState('Gate_Show_OC',true)==3">
  <button class="garage" style="background: blue;" ng-click="sendCmd('Garage', 'ON')">
  Tor in Bewegung
  </button>
</div>

and this is how it looks:

grafik

9

Yes, I would like it too. For me is the green but unfortunately still a 5px wide black frame.

10

Try

<style>
 .garage { 
  display: block;
  position:absolute;
  height:auto;
  width:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  vertical-align:center;
  text-align: center;
  font-size: 12pt;
  border : 0;
    }
</style>
11

it works great now, thank you.

1 Like