Tabelle Verständnisfrage

[M.Piet]

Hallo Zusammen,

Ich habe schon einiges mit TBUI umgesetzt und bin recht zufrieden. Der WAF ist auch Top.
Nun will ich erstmals mehre Daten in ein Feld bringen, genauer gesagt eine Reihe mit 2 Spalten.

Dies erreiche ich durch folgendes:

Code Auswählen Erweitern

<div class="sheet">
    <div class="row">
        <div class="cell"> </div>
        <div class="cell">  </div>
    </div>
</div>

Nun aber die Stelle an der ich scheitere. Ich möchte in der linken Spalte 2 Balken haben:

Code Auswählen Erweitern

<div data-type="level" data-device='Drucker' data-get='Black' </div>
<div data-type="level" data-device='Drucker' data-get='Cyan'  </div>

In der rechten Spalte möchte ich ein Symbol haben:

Code Auswählen Erweitern

<div data-type="symbol" data-device="NAS_Synology_Backup_CAM" data-get-on='["present","absent"]' data-icons='["fa-sitemap","fa-exclamation-triangle"]' data-colors='["SeaGreen","Crimson"]'class="inline nolabels"></div>

Beides einzeln funktioniert, schon mehrfach umgesetzt.

Für mich erschien das logisch:

Code Auswählen Erweitern

<div class="sheet">
    <div class="row">
        <div class="cell">
<div data-type="level" data-device='Drucker' data-get='Black' </div>
<div data-type="level" data-device='Drucker' data-get='Cyan'  </div>
</div>
       
<div class="cell">
<div data-type="symbol" data-device="NAS_Synology_Backup_CAM" data-get-on='["present","absent"]' data-icons='["fa-sitemap","fa-exclamation-triangle"]' data-colors='["SeaGreen","Crimson"]'class="inline nolabels"></div>
</div>

    </div>
</div>
Raus kommt aber Mist (siehe Anhang).....danke für ein klein wenig Hilfe...

[eki]

Du hast die Divs für die level widgets nicht geschlossen. Wenn Du weitere Strukturierung möchstest, solltests Du auch <div class="col"... verwenden. Dann kannst Du Das Ganze wie eine Tabelle strukturieren.

Code Auswählen Erweitern


<div class="sheet">
    <div class="row">
        <div class="cell">
<div data-type="level" data-device='Drucker' data-get='Black'> </div>
<div data-type="level" data-device='Drucker' data-get='Cyan'> </div>
</div>
       
<div class="cell">
<div data-type="symbol" data-device="NAS_Synology_Backup_CAM" data-get-on='["present","absent"]' data-icons='["fa-sitemap","fa-exclamation-triangle"]' data-colors='["SeaGreen","Crimson"]'class="inline nolabels"></div>
</div>

    </div>
</div>

[M.Piet]

Stimmt, du hast recht. Da fehlt nur ein kleines Zeichen. Ich musste mehrmals hinschauen, bis ich den Unterschied erkannt habe. Danke dafür!

Nun sehe ich beide Balken und das Symbol. Stellt sich mir nur noch die Frage, warum die beiden Balken nicht nebeneinander sind... (siehe Screenshot).

[eki]

Wenn Du sie nebeneinander haben willst, dann musst Du sie nicht in ein cell div packen sondern jeweils in eines.

Oder wenn Du mehr Kontrolle willst, dann eben das ganze als Tabelle aufbauen und z.B. mit verschachtelten col und row divs arbeiten. Du könntest eine row machen darin 2 cols. In der ersten Col machst Du zwei Zellen mit den level widgets in der zweiten col dann das symbol. Dann kannst Du die Breite der ersten col größer machen (col-75) und die der zweiten kleiner (col-25).

[Thorsten Pferdekaemper]

...oder FUIP nehmen, die Dinger als HTML-View einbinden und genau dorthin schieben, wo sie sein sollen.
SCNR,
   Thorsten

[M.Piet]

Hallo Thorsten,

FUIP ....? Da ist wohl was an mir vorbei gegangen.....das schaue ich mir mal an.
Danke dafür.