Text space in a custom widget

Setup, Configuration and Use Beginners
,
1

Hi Guys,
i working on a new widget and it works perfect, but the look is still not great.

I am looking into a way to get the text vertically closer together. So i have 4 lines of text in a 1 by 1 widget and the bottom of my code seems to be 2 or 3 px larger than the habpanel widget cluster. But i can’t find a way to solve this. I tried line hight, but i can just make the space larger but not coming closer together.

This is my widget screenshot:
0

This is my code:

<style>
  .blinds-table {
	width: 100%;
	height: 100%;
	text-align: left;
	top:0px;
	bottom:0;
	left:0px;
	right:0;
	position:absolute
  }

</style>

  
<table class="blinds-table" border="1">
<!-- first cell for heating -->
<tr >
      <td ng-style="{'background-color': itemValue(config.actuator)=='AN' ? 'red' : '#424242'}" >
		<div ><div ng-style="{color: itemValue(config.actuator)=='AN'?'#FFFFFF':'#FFFFFF', 'text-align': 'center'   }"> Heizung: </div></div>
		<div ><div ng-style="{ color: itemValue(config.actuator)=='AN'?'yellow':'#FFFFFF','background-color': itemValue(config.actuator)=='AN' ? 'red' : '#424242' , 'text-align': 'center'   }">{{itemValue(config.actuator)}}</div></div>
</td>
</tr>

<!-- second cell for window -->
<tr>
	<td ng-if="itemValue(config.windowstatus)=='geschlossen'" ng-style="{'background-color': 'green'}">
		<div><div ng-style="{color: itemValue(config.windowstatus)=='geschlossen'?'#FFFFFF':'#FFFFFF','background-color': 'green', 'text-align': 'center'  }"> Fenster: </div></div>
		<div><div ng-style="{ color: itemValue(config.windowstatus)=='geschlossen'?'#FFFFFF':'#FFFFFF','background-color': 'green', 'text-align': 'center' }">{{itemValue(config.windowstatus)}}</div></div>
	</td>
  
	<td ng-if="itemValue(config.windowstatus)=='gekippt'" ng-style="{'background-color': 'yellow'}">
			<div><div ng-style="{color: itemValue(config.windowstatus)=='gekippt'?'#424242':'#424242','background-color': 'yellow', 'text-align': 'center'  }"> Fenster: </div></div>
			<div><div ng-style="{ color: itemValue(config.windowstatus)=='gekippt'?'#424242':'#424242','background-color': 'yellow', 'text-align': 'center'  }">{{itemValue(config.windowstatus)}}</div></div>
	</td>

	<td ng-if="itemValue(config.windowstatus)=='offen'" ng-style="{'background-color': 'red'}">
			<div><div ng-style="{color: itemValue(config.windowstatus)=='offen'?'#FFFFFF':'#FFFFFF','background-color': 'red', 'text-align': 'center'  }"> Fenster: </div></div>
			<div><div ng-style="{ color: itemValue(config.windowstatus)=='offen'?'#yellow':'#FFFFFF','background-color': 'red', 'text-align': 'center'  }">{{itemValue(config.windowstatus)}}</div></div>
	</td>
</tr>

</table>

Thanks
Andreas

2

Ah one more information. I tried to play with the text size, but it doesn’t matter :-/

3

Hi Guys,
i tested a bit more and 4 lines of text underneath seems to be not able to display properly when HABPanel is displayed on a Table, like an iPad.
So i came up with this:
1

Heating-Window Dash
Version: 1.1
####################################################
settings:
TYPE : ID : LABEL
-----------------------
Item : actuator
Item : windowstatus
#######################################
<!-- Font sizes:
https://www.w3schools.com/cssref/pr_font_font-size.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=x-small 
https://www.w3schools.com/cssref/pr_font_font-size.asp

font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;
-->


<style>
  .blinds-table {
	width: 100%;
	height: 100%;
	text-align: left;
	top:0px;
	bottom:0px;
	left:0px;
	right:0;
	position:absolute

  }

font-size1 {
    font-size:small;

}
  
font-size2 {
    font-size:small;

}
  
  
</style>

 
<table class="blinds-table" border="0">
<!-- first cell for heating -->
<tr>
      <td width= '50%'  ng-style="{'background-color': itemValue(config.actuator)=='AN' ? 'red' : '#424242'}" >
		    <div ng-style="{color: itemValue(config.actuator)=='AN'?'#FFFFFF':'#FFFFFF', 'text-align': 'right' }"><font-size1><u>Heizung:</u></font-size1></div>
	    </td>
  <td ng-style="{'background-color': itemValue(config.actuator)=='AN' ? 'red' : '#424242'}" >
        <div ng-style="{ color: itemValue(config.actuator)=='AN'?'yellow':'#FFFFFF','background-color': itemValue(config.actuator)=='AN' ? 'red' : '#424242' , 'text-align': 'left'  , 'margin-left':'10px' }"><font-size2>{{itemValue(config.actuator)}}</font-size2></div>   
</td>
</tr>

<!-- second cell for window -->
<tr>
	<td colspan="2" ng-if="itemValue(config.windowstatus)=='geschlossen'" ng-style="{'background-color': 'green'}">
		<div ng-style="{color: itemValue(config.windowstatus)=='geschlossen'?'#FFFFFF':'#FFFFFF','background-color': 'green', 'text-align': 'center'  }"><u>Fenster:</u></div>
		<div ng-style="{ color: itemValue(config.windowstatus)=='geschlossen'?'#FFFFFF':'#FFFFFF','background-color': 'green', 'text-align': 'center' }">{{itemValue(config.windowstatus)}}</div>
	</td>
  
	<td colspan="2" ng-if="itemValue(config.windowstatus)=='gekippt'" ng-style="{'background-color': 'yellow'}">
			<div ng-style="{color: itemValue(config.windowstatus)=='gekippt'?'#424242':'#424242','background-color': 'yellow', 'text-align': 'center'  }"><u>Fenster:</u></div>
			<div ng-style="{ color: itemValue(config.windowstatus)=='gekippt'?'#424242':'#424242','background-color': 'yellow', 'text-align': 'center'  }">{{itemValue(config.windowstatus)}}</div>
	</td>

	<td colspan="2" ng-if="itemValue(config.windowstatus)=='offen'" ng-style="{'background-color': 'red'}">
			<div ng-style="{color: itemValue(config.windowstatus)=='offen'?'#FFFFFF':'#FFFFFF','background-color': 'red', 'text-align': 'center'  }"><u>Fenster:</u></div>
			<div ng-style="{ color: itemValue(config.windowstatus)=='offen'?'yellow':'#FFFFFF','background-color': 'red', 'text-align': 'center'  }">{{itemValue(config.windowstatus)}}</div>
	</td>
</tr>
</table>

Best Regards
Andreas