Html Box unterschiedliche Darstellung

IP-Symcon Visualisierung
1

Hallo zusammen,

ich arbeite gerade an einem Modul wo ich eine Schalter Variable zum senden in einer Html Box anzeige. Wenn das Modul alleine in einem Ordner liegt, wird alles normal dargestellt.

grafik

grafik

Wenn ich jedoch ein anderes Modul in den selben Ordner packe was ebenfalls eine HTML Box hat, sind die Buttons verschoben und die Farben sind nicht mehr richtig.

grafik

grafik

Hat einer eine Idee woran das liegen könnte?
Könnte es am CSS liegen was nahezu identisch in beiden HTMLBoxen ist? Sollte doch eingelich keine Rolle spielen, da es ja zwei Module sind, oder?

Ich habe nun auch schon versucht, ein und mehrere andere Module in den selben Ordner zu legen. Jedoch wird die HtmlBox korrekt angezeigt.

Gruß
Oli

2

Wenn ich die Module in der Reihenfolge ändere, dann sind die Buttons im anderen Modul verschoben.

3

Poste mal den vollständigen Inhalt beider HTML Boxen.

4

Box 1 die falsch dargestellt wird:

<style type="text/css">table.test { width: 100%; border-collapse: collapse}Test { border: 2px solid #444455;}td.lst { width: 150px; text-align:center; padding: 2px; border-right: 0px solid rgba(255, 255, 255, 0.2); border-top: 0px solid rgba(255, 255, 255, 0.1); }.blue { padding: 7px; color: rgb(255, 255, 255); background-color: rgb(100, 100, 255); background-icon: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-icon: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }.red { padding: 7px; color: rgb(255, 255, 255); background-color: rgb(255, 100, 100); background-icon: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-icon: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }.green { padding: 7px; color: rgb(255, 255, 255); background-color: rgb(100, 255, 100); background-icon: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-icon: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }.yellow { padding: 7px; color: rgb(255, 255, 255); background-color: rgb(255, 255, 100); background-icon: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-icon: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }.orange { padding: 7px; color: rgb(255, 255, 255); background-color: rgb(255, 160, 100); background-icon: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-icon: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }</style><table class='test'><tr><td style='text-align:left;font-size:15px;border-bottom:1.0px outset;border-top:0.0px outset;color:#FFFFF;' colspan='2'>DashBoard</td><td style='font-size:15px; border-bottom:1.0px outset;border-top:0.0px outset' class='lst'><div class ='green' onclick="window.xhrGet=function xhrGet(o) {var HTTP = new XMLHttpRequest(); HTTP.open('GET',o.url,true,'ips','ips'); HTTP.send();};window.xhrGet({ url: 'hook/NotificationBoard?action=toggle&id=39691' });">Senden</div></td></tr><td style='text-align:left;font-size:15px;border-bottom:1.0px outset;border-top:0.0px outset;color:#FFFFF;' colspan='2'>Telegram</td><td style='font-size:15px; border-bottom:1.0px outset;border-top:0.0px outset' class='lst'><div class ='red' onclick="window.xhrGet=function xhrGet(o) {var HTTP = new XMLHttpRequest(); HTTP.open('GET',o.url,true,'ips','ips'); HTTP.send();};window.xhrGet({ url: 'hook/NotificationBoard?action=toggle&id=27133' });">nicht Senden</div></td></tr><td style='text-align:left;font-size:15px;border-bottom:1.0px outset;border-top:0.0px outset;color:#FFFFF;' colspan='2'>WebFront PopUp</td><td style='font-size:15px; border-bottom:1.0px outset;border-top:0.0px outset' class='lst'><div class ='red' onclick="window.xhrGet=function xhrGet(o) {var HTTP = new XMLHttpRequest(); HTTP.open('GET',o.url,true,'ips','ips'); HTTP.send();};window.xhrGet({ url: 'hook/NotificationBoard?action=toggle&id=44979' });">nicht Senden</div></td></tr><td style='text-align:left;font-size:15px;border-bottom:1.0px outset;border-top:0.0px outset;color:#FFFFF;' colspan='2'>WebFront SendNotification</td><td style='font-size:15px; border-bottom:1.0px outset;border-top:0.0px outset' class='lst'><div class ='red' onclick="window.xhrGet=function xhrGet(o) {var HTTP = new XMLHttpRequest(); HTTP.open('GET',o.url,true,'ips','ips'); HTTP.send();};window.xhrGet({ url: 'hook/NotificationBoard?action=toggle&id=34488' });">nicht Senden</div></td></tr>

Box2:

<style type="text/css">table.msg { width:100%; border-collapse: collapse; }td.fst { width: 36px; padding: 2px; border-left: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.1); }td.mid { padding: 2px;  border-top: 1px solid rgba(255, 255, 255, 0.1); }td.lst { width: 42px; text-align:center; padding: 2px;  border-right: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.1); }tr:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }.blue { padding: 5px; color: rgb(255, 255, 255); background-color: rgb(0, 0, 255); background-icon: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-icon: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }.red { padding: 5px; color: rgb(255, 255, 255); background-color: rgb(255, 0, 0); background-icon: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-icon: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }.green { padding: 5px; color: rgb(255, 255, 255); background-color: rgb(0, 255, 0); background-icon: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-icon: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }.yellow { padding: 5px; color: rgb(255, 255, 255); background-color: rgb(255, 255, 0); background-icon: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-icon: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }.orange { padding: 5px; color: rgb(255, 255, 255); background-color: rgb(255, 160, 0); background-icon: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-icon: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }.time {  vertical-align: text-top; float:left; font-size: 9px; padding-left:3px; padding-top: 0px; padding-right: 2px; margin-right:4px; }.img { vertical-align: text-top; padding-left: 8px; padding-right: 1px; padding-bottom:0px; width:25px; height: 25px;}.bild { margin-left:4px; margin-right:3px; padding: 1px; padding-top:4px; padding-right:0px; height: 100px;}.pagebutton {float:left; padding: 5px; margin-right: 1px; color: rgb(255, 255, 255); background-color: rgb(255, 160, 0); background-icon: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-icon: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }</style><table class="msg"><tr><td class="fst"><img src='img/icons/Camera.svg' class="img"></img><div class="time">28.02.2021 10:00:13</div></td><td class="mid">Das ist eine vorlage</td><td class='lst'><div class='red' onclick="window.xhrGet=function xhrGet(o) {var HTTP = new XMLHttpRequest();HTTP.open('GET',o.url,true,'ips','ips');HTTP.send();};window.xhrGet({ url: 'hook/SystemDashboard?ts=' + (new Date()).getTime() + '&action=toggle&id=8' });">OK</div></td></tr><tr><td class="fst"><img src='img/icons/Camera.svg' class="img"></img><div class="time">28.02.2021 09:12:40</div></td><td class="mid">Das ist eine vorlage<br><br><a href="/var/lib/symcon/media/anonymous-4k-ok-1366x768.jpg" target="_blank"><img class='bild' src="/var/lib/symcon/media/anonymous-4k-ok-1366x768.jpg"></a></td><td class='lst'><div class='blue' onclick="window.xhrGet=function xhrGet(o) {var HTTP = new XMLHttpRequest();HTTP.open('GET',o.url,true,'ips','ips');HTTP.send();};window.xhrGet({ url: 'hook/SystemDashboard?ts=' + (new Date()).getTime() + '&action=toggle&id=7' });">OK</div></td></tr><tr><td class="fst"><img src='img/icons/Camera.svg' class="img"></img><div class="time">28.02.2021 09:12:29</div></td><td class="mid">Das ist eine vorlage</td><td class='lst'><div class='blue' onclick="window.xhrGet=function xhrGet(o) {var HTTP = new XMLHttpRequest();HTTP.open('GET',o.url,true,'ips','ips');HTTP.send();};window.xhrGet({ url: 'hook/SystemDashboard?ts=' + (new Date()).getTime() + '&action=toggle&id=6' });">OK</div></td></tr><tr><td class="fst"><img src='img/icons/Camera.svg' class="img"></img><div class="time">27.02.2021 18:12:33</div></td><td class="mid">Das ist eine vorlage</td><td class='lst'><div class='blue' onclick="window.xhrGet=function xhrGet(o) {var HTTP = new XMLHttpRequest();HTTP.open('GET',o.url,true,'ips','ips');HTTP.send();};window.xhrGet({ url: 'hook/SystemDashboard?ts=' + (new Date()).getTime() + '&action=toggle&id=3' });">OK</div></td></tr></table>
5

Ich habe gerade gesehen, dass er sich im CSS Style das holt, was in der anderen HtmlBox ist.
Das ist im CSS der Teil „td.lst“, sowie die Buttons. Diese sind in beiden HtmlBoxen mit dem selben Namen.

grafik
grafik921×692 47 KB

grafik

Wenn ich den Namen abändere, ist es richtig.

Warum ist das so? Es sind doch zwei unterschiedliche HtmlBoxen. Oder wird das vom Browser falsch interpretiert?

Gruß
Oli

6

Die HTML Box kapselt nicht. Sondern der CSS Kontext ist „global“. Du könntest die CSS Eigenschaften auch in die webfront.css schreiben. Oder in EINE HTML Box den css Code für ALLE HTML Boxen.

Nachtrag: Ist es dir nicht möglich einfach die CSS Eigenschaften der Symcon Buttons zu klauen? Warum das selber nachbauen? Du kannst eine passende Klasse vergeben und dann ist das identisch zu den System Buttons.

7

Ah ok, verstehe. :slight_smile:

Das CSS der HTML Box ist noch ein überbleibsel aus einem Script hier aus dem Forum was ich nie angepasst habe weil es immer geklappt hatte.
Deine Idee mit dem CSS der Symcon Buttons finde ich gut. Werd ich mich mal mit beschäftigen, wenn ich das Modul soweilt am laufen habe. Ich habe es im CSS erst mal in den Namen angepasst, damit das nicht mehr vorkommt.

Vielen Dank.

Gruß
Oli

8

Wer spielt den da mit meinen Styles rum :innocent:

9

Hab mich ins gemachte Bett gelegt. :see_no_evil:
Fand das damals mit den Buttons schön und da kamen deine Styles gelegen. :slight_smile: