Hello, i have some style Problems with my HabPanel.
The second widget-Border is smaller than the widget itself. If i activate responsive view in Chrome ( F12 ) Both widgets are overlapped.
This is the code from the first widget:
<div class="section">
<div class="bigDash">
<div class="description">Wohnzimmer</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('WohnzimmerHeizungWand_1TEMPERATURE') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
</div>
<div class="bigDash">
<div class="description">Küche</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('KuecheHeizung_4ACTUALTEMPERATURE') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
</div>
<div class="bigDash">
<div class="description">Flur</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('FlurHeizung_4ACTUALTEMPERATURE') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
</div>
<div class="bigDash">
<div class="description">Schlafzimmer</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('Schlafzimmer_Temperatur_Temperature') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
<div class="bottom">
<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#luftfeuchte"></use></svg></div>
<div class="value">Aktuelle Luftfeuchtigkeit: {{itemValue('Schlafzimmer_Temperatur_Humidity') | number:1}} %</div>
<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#batterie"></use></svg></div>
<div class="value">Batterie-Status: {{itemValue('Schlafzimmer_Temperatur_BatteryLevel')}}%</div>
</div>
</div>
<div class="bigDash">
<div class="description">Arbeitszimmer</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('Arbeitszimmer_Temperatur_Temperature') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
<div class="bottom">
<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#luftfeuchte"></use></svg></div>
<div class="value">Aktuelle Luftfeuchtigkeit: {{itemValue('Arbeitszimmer_Temperatur_Humidity') | number:1}} %</div>
<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#batterie"></use></svg></div>
<div class="value">Batterie-Status: {{itemValue('Arbeitszimmer_Temperatur_BatteryLevel')}}%</div>
</div>
</div>
<div class="bigDash">
<div class="description">Badezimmer</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('Bad_Temperatur_Temperature') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
<div class="bottom">
<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#luftfeuchte"></use></svg></div>
<div class="value">Aktuelle Luftfeuchtigkeit: {{itemValue('Bad_Temperatur_Humidity') | number:1}} %</div>
<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#batterie"></use></svg></div>
<div class="value">Batterie-Status: {{itemValue('Bad_Temperatur_BatteryLevel')}}%</div>
</div>
</div>
<div class="bigDash">
<div class="description">Badezimmer Gast</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('BadGast_Temperatur_Temperature') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
<div class="bottom">
<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#luftfeuchte"></use></svg></div>
<div class="value">Aktuelle Luftfeuchtigkeit: {{itemValue('BadGast_Temperatur_Humidity') | number:1}} %</div>
<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#batterie"></use></svg></div>
<div class="value">Batterie-Status: {{itemValue('BadGast_Temperatur_BatteryLevel')}}%</div>
</div>
</div>
<div class="bigDash">
<div class="description">Badezimmer Keller</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('Bad_Keller_Temperatur_Temperature') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
<div class="bottom">
<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#luftfeuchte"></use></svg></div>
<div class="value">Aktuelle Luftfeuchtigkeit: {{itemValue('Bad_Keller_Temperatur_Humidity') | number:1}} %</div>
<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#batterie"></use></svg></div>
<div class="value">Batterie-Status: {{itemValue('Bad_Keller_Temperatur_BatteryLevel')}}%</div>
</div>
</div>
<div class="bigDash">
<div class="description">Draußen</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('Garten_Temperatur_Temperature') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
<div class="bottom">
<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#luftfeuchte"></use></svg></div>
<div class="value">Aktuelle Luftfeuchtigkeit: {{itemValue('Garten_Temperatur_Humidity') | number:1}} %</div>
<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#batterie"></use></svg></div>
<div class="value">Batterie-Status: {{itemValue('Garten_Temperatur_BatteryLevel')}}%</div>
</div>
</div>
</div>
This is the code from the second Widget
<div class="section">
{{(itemsInGroup('gFensterStatus') | filter:{state:'!closed'}).length}} / {{(itemsInGroup('gFensterStatus')).length}} geöffnet
<hr></hr>
<div ng-repeat="item in itemsInGroup('gFensterStatus')">
<div class="footerDash">
<div class="top">
<div ng-if="itemState(item.name)=='geöffnet'">
<div class="footerIcon"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#windowopen"></use></svg></div>
</div>
<div ng-if="itemState(item.name)=='gekippt'">
<div class="footerIcon"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#windowopen"></use></svg></div>
</div>
<div ng-if="itemState(item.name)=='geschlossen'">
<div class="footerIcon"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#windowclosed"></use></svg></div>
</div>
{{item.label}} {{itemState(item.name)}}
</div>
</div>
</div>
</div>
This is the CSS FIle
@charset "UTF-8";
.section .rzslider .rz-bar {
background: #404040;
}
.dashboard-title {
color: white;
font-size: 35px;
font-weight: 500;
}
.header {
position: -webkit-sticky;
position: sticky;
-webkit-backdrop-filter: blur(10px);
margin: 0px;
width: 100%;
/* padding: 8px; */
z-index: 99;
background: rgba(57, 57, 57, 0.5);
border-bottom: 1px solid #262626;
top: 0px;
}
.container {
padding: 0px;
}
@media only screen {
.section {
}
.section .widget {
width: 100%;
float: left;
min-height: 35px;
}
.footerDash{
width: calc(100% - 6px);
}
.section .bigDash {
margin-left: auto;
width: calc(100% - 6px);
margin-right: auto;
}
}
@media only screen and (min-width: 650px) {
.section {
}
.section .widget {
width: 50%;
float: left;
}
.footerDash{
width: calc(50% - 6px);
min-width: 320px;
}
.section .bigDash {
margin-left: auto;
width: calc(50% - 6px);
margin-right: auto;
min-width: 320px;
}
}
@media only screen and (min-width: 1000px) {
.section {
}
.section .widget {
width: 33%;
float: left;
}
.footerDash{
width: calc(33% - 3px);
min-width: 320px;
}
.section .bigDash {
margin-left: auto;
width: calc(33% - 3px);
min-width: 320px;
margin-right: auto;
}
}
.section {
width: 100%;
overflow: hidden;
margin-bottom: 10px;
/* margin-right: 20px; */
/* float: left; */
text-align: left;
color: white;
border-bottom: 1px solid #2a2a2a;
/* padding: 3px; */
padding-bottom: 6px;
}
.section .bigDash {
float: left;
padding-bottom: 15px;
padding-top: 10px;
background: #212124;
/* margin-bottom: 3px; */
border-radius: 10px;
/* margin-right: 3px; */
box-sizing: content-box;
/* margin-left: 3px; */
margin: 3px;
}
.footerDash{
margin-left: auto;
margin-right: auto;
height: 10px;
margin-right: auto;
float: left;
padding-bottom: 15px;
padding-top: 10px;
background: #212124;
border-radius: 10px;
box-sizing: content-box;
margin: 3px;
}
.footerIcon{
width: 20px;
height: 20px;
margin-left: 5px;
margin-right: 5px;
float: left;
}
.section .bigDash .description {
font-size: 18px;
padding-left: 15px;
font-weight: 500;
}
.section .bigDash .top {
clear: left;
margin-left: auto;
width: 205px;
margin-right: auto;
height: 74px;
}
.section .bigDash .top .icon {
width: 50px;
height: 50px;
margin-top: 10px;
margin-left: 15px;
float: left;
}
.section .bigDash .top {
float: left;
/* margin-left: auto; */
/* width: 330px; */
/* margin-right: auto; */
height: 74px;
}
.section .bigDash .top .value {
width: 208px;
/* border: 1px solid green; */
height: 80px;
}
.section .bigDash .bottom {
float: left;
margin-left: 21px;
/* margin-right: auto; */
/* height: 35px; */
width: calc(100% - 240px);
/* border: 1px solid; */
padding-top: 3px;
}
.section .bigDash .bottom .value {
padding-top: 5px;
padding-left: 5px;
/* padding-right: 25px; */
/* float: left; */
color: white;
/* clear: right; */
height: 33px;
}
.section .bigDash .bottom .icon {
width: 30px;
height: 30px;
padding-top: 0px;
float: left;
}
.section .bigDash .main {
font-size: 65px;
letter-spacing: 0px;
line-height: 70px;
float: left;
color: white;
width: 75px;
text-align: right;
font-weight: 500;
}
.section .bigDash .sub {
font-size: 15px;
color: #575f59;
/* display: inline; */
text-align: left;
margin-left: -14px;
font-weight: 500;
/* width: 20px; */
float: left;
}
Maybe someone have time and be able to help me