Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Algie]

Hallo, kann ich im Popup einen Text auch untereinander abbilden?

Der Datenpunkt ist ein Jason-Format

Ich möchte die Räume untereinander haben:

[MCU]

@algie Zeig mal bitte den Geräte-DP von eingeschaltete Lichter
-> Aus dem JSON ein HTML generieren.

[RkcCorian]

@mcu Super! Hab ein Gif erstellt, kannst Du es bei OneDrive runterladen?! Ist 21MB groß 🙈
https://1drv.ms/u/s!AtxTytj-pUbiyc9tHNf56OXc5Ov_tw?e=91fBHW

Dort ist auch das PDF mit der generellen Beschreibung meiner VIS, falls es für Dein Wiki relevant wäre. Keine Ahnung ob Du es mal anschauen konntest 😃

[MCU]

@rkccorian Hab ich auch mit aufgenommen.

[Algie]

@mcu
Ich habe ein Blockly gemacht, der mir alle eingeschalteten Räume in eine Liste schreibt.
Diese Schreibe ich dann in ein Datenpunkt (Jason).
Aber der Text steht ja hintereinander.
Ich möchte aber gerne alle Räume untereinander in Jarvis haben. Dies aber im Popup.

[MCU]

@algie Wie sieht denn der JSON-Inhalt aus? ["eins","zwei"]?
siehe oben: Aus dem JSON ein HTML generieren.

<div>eins</div><div>zwei</div><div>drei</div>

[Algie]

@mcu genau, mein Text sieht so aus.

Raum,Raum,Raum, usw.

HTML ist die Lösung. Vielen Dank!
Probiere ich heute aus und werde berichten.

[Dominik F.]

@mcu

Ich brauche mal wieder deine Unterstützung :)

Als erstes möchte ich die Uhrzeiten auf dem Bild nach links verschieben.
Ich habe dazu folgendes in den Styles reingeschrieben:

.jarvis-widget-3b737dde-06aa-4e77-b65e-de40f1150caa .jarvis-StateListItem-Action-primaryStateKey .q-item__label {
	padding-right: 40px;
}

Ich schaffe es leider nicht, das ganze nur auf die Uhrzeiten zu begrenzen. Ich habe es mit :nth-child(X) versucht, jedoch egal was ich für X eingebe, es passt nicht für die Uhrzeiten.

[MCU]

@dominik-f Wo hast du denn das nth-child angesetzt?

[Dominik F.]

@mcu

Ich habe es hinter label und hinter statekey versucht

[MCU]

@dominik-f Zeig mal ein Beispiel für __label

[Dominik F.]

@mcu

:nth-child(1) sieht genauso aus wie auf dem Bild, bei anderen Zahlen sieht es so aus, als ob gar nichts passiert

[MCU]

@dominik-f Probier mal:

.jarvis-widget-3b737dde-06aa-4e77-b65e-de40f1150caa .jarvis-StateListItem-Action-primaryStateKey:nth-child(x) {
	padding-right: 40px;
}

[Dominik F.]

@mcu

Damit verschiebe ich alles nach links, Uhrzeiten, die Button und das Rollladenlevel

Hab es zusätzlich mit:

.jarvis-widget-3b737dde-06aa-4e77-b65e-de40f1150caa .q-item__label:nth-child(1) {
	padding-right: 40px;
}

Da verschiebt er die Uhrzeiten, aber leider auch die Prozentangaben und es sieht wieder aus wie auf dem Bild

[MCU]

@dominik-f Und das?

.jarvis-widget-3b737dde-06aa-4e77-b65e-de40f1150caa .jarvis-StateListItem-Action:nth-child(x) {
	padding-right: 40px;
}

[Dominik F.]

@mcu sagte in jarvis v3.0.0 - just another remarkable vis:

                                                                                                                            .jarvis-widget-3b737dde-06aa-4e77-b65e-de40f1150caa .jarvis-StateListItem-Action:nth-child(x) {                                                                                                                                                                            	padding-right: 40px;                                                                                                                                                                            }                                            

Das hat funktioniert, danke.

Allerdings verstehe ich nun die Zahlen die man für x setzen muss nicht mehr^^

.jarvis-widget-3b737dde-06aa-4e77-b65e-de40f1150caa .jarvis-StateListItem-Action:nth-child(3) {
	padding-right: 40px;
}

Warum muss da eine 3 hin?

[MCU]

@dominik-f

[Dominik F.]

@mcu

Genau so hab ich es auch gedacht. Nur mit der 3 verschiebt sich gleichzeitig auch die 4,6 und 7.

[MCU]

@dominik-f Besser wäre?

.jarvis-widget-3b737dde-06aa-4e77-b65e-de40f1150caa .jarvis-StateListItem:nth-child(3)  .jarvis-StateListItem-Action {
	padding-right: 40px;
}

[Dominik F.]

@mcu

Ich zeig dir mal warum ich so verwirrt bin:

Ich habe folgendes im Style drin:

.jarvis-widget-3b737dde-06aa-4e77-b65e-de40f1150caa .q-item__section--avatar:nth-child(1) {
	padding-left: 40px;
	transform: scale(0.8,0.8);
}

.jarvis-widget-3b737dde-06aa-4e77-b65e-de40f1150caa .jarvis-StateListItem-Body:nth-child(2) {
	font-size: 12px;
}

.jarvis-widget-3b737dde-06aa-4e77-b65e-de40f1150caa .jarvis-StateListItem-Action:nth-child(3) {
	padding-right: 20px;
	font-size: 12px;
}

Die erste Anweisung verschiebt die Icons mit dem A und die Schrift Auto auf/zu nach rechts und macht die Symbole kleiner.

Die zweite Anweisung macht die Schrift auto auf/zu bei kleiner, auch wieder bei allen.

Die dritte verschiebt die Uhrzeiten.

Die Zahl hinter nth-child geht ja von 1 hoch auf 3, aber alles bezieht sich immer auf die 3,4,6 und 7 bei deinem Bild.