Hi, is it possible to reduce line spacing of text nodes with a template including some css:
?
or do I have to create a table on my own like I did for fail2ban:
<div>
<table class="table table-bordered" style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th>Zeitpunkt</th>
<th>IP Adresse</th>
<th>Dienst</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entry in msg.payload">
<td>{{ entry.time }}</td>
<td>{{ entry.IP }}</td>
<td>{{ entry.Dienst }}</td>
</tr>
</tbody>
</table>
</div>
what would be much more work for me.
Greetings
Yes, of course. Its all just HTML.
All you need is to determine the best/most suitable CSS selector and apply the overrides you desire.
Personally, so as not to affect all text nodes across the entirety of the dashboard, I would set a classname on the text nodes I want to affect and when i declare the CSS (in a ui-template set for CSS mode) I would address the styles using my chosen classname.
can you tell me the css code for that ?
may be something like....
div.a {
line-height: normal;
}
div.b {
line-height: 1.6;
}
div.c {
line-height: 80%;
}
div.d {
line-height: 200%;
}
I´ve rebuild a few tabs to one tab with tables. but I can't understand the logic of Node-Red Dashboard.
sometimes it makes the individual flex containers the same, sometimes a table is longer towards the bottom, sometimes there is an unnecessary scroll wheel.
Did you unterstand the logic ?
here is my style:
<style>
body {
//font-size: 12px;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-weight: bold;
}
td,
th {
//font-size: 12px;
}
td {
padding: 4px;
text-align: left;
border: 1px solid #ddd;
}
td:nth-child(1),
th:nth-child(1) {
width: 22%;
}
td:nth-child(2),
th:nth-child(2) {
text-align: right;
}
td:nth-child(3),
th:nth-child(3) {
text-align: right;
}
td:nth-child(4),
th:nth-child(4) {
text-align: right;
}
td:nth-child(5),
th:nth-child(5) {
text-align: right;
}
.rot {
color: red;
}
.grün {
color: green;
}
.blau {
color: blue;
}
</style>
the first container:
<table>
<th></th>
<td>Gesamt</td>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<tr>
<td>Leistung</td>
<td class="{{msg.payload.P < 0 ? 'grün' : 'rot'}}">{{msg.payload.P}} W</td>
<td class="{{msg.payload.P1 < 0 ? 'grün' : 'rot'}}">{{msg.payload.P1}} W</td>
<td class="{{msg.payload.P2 < 0 ? 'grün' : 'rot'}}">{{msg.payload.P2}} W</td>
<td class="{{msg.payload.P3 < 0 ? 'grün' : 'rot'}}">{{msg.payload.P3}} W</td>
</tr>
<tr>
<td>Strom</td>
<td class="blau">{{msg.payload.IN}} A</td>
<td>{{msg.payload.I1}} A</td>
<td>{{msg.payload.I2}} A</td>
<td>{{msg.payload.I3}} A</td>
</tr>
<tr>
<td>Blindleistung</td>
<td>{{msg.payload.Q}} var</td>
<td>{{msg.payload.Q1}} var</td>
<td>{{msg.payload.Q2}} var</td>
<td>{{msg.payload.Q3}} var</td>
</tr>
<tr>
<td>cos phi</td>
<td>{{msg.payload.PF}}</td>
<td>{{msg.payload.PF1}}</td>
<td>{{msg.payload.PF2}}</td>
<td>{{msg.payload.PF3}}</td>
</tr>
<tr>
<td class="grün">Zähler Einsp.</td>
<td colspan="2">{{msg.payload.W_exp}} kWh</td>
</tr>
<tr>
<td class="grün">Zähler effektiv</td>
<td colspan="2">{{msg.payload.W_eff}} kWh</td>
</tr>
<tr>
<td class="rot">Zähler Bezug</td>
<td colspan="2">{{msg.payload.W_imp}} kWh</td>
</tr>
</table>
here the results:
unnecessary scroll wheel for example
i had to put "&
#8203; -br- &
#8203;" under the table code, otherwise I have unnecessary scroll wheels in the container or some containers are of different lengths.
I would be very grateful for tips from a css pro.
If I fix automatic size adjustment
the containers are too small in height, can I set the high somewhere?
