Widget zum anzeigen der Karten in einer Trello-Liste

[afroasiate]

Hallo Leute,

ich arbeite gerne mit Trello und möchte mir nun gerne eine View in vis bauen die Ähnlichkeit mit den Listen von Trello hat.

Es geht mir nicht mal darum das ich diese Liste interaktiv bedienen kann, sondern viel mehr um das Anzeigen der Einträge in der Liste.

Aktuell hole ich bereits mit der Trello API die nötigen Daten und verarbeite Sie in einen JSON Objekt, das ganze habe ich auf ein Minimum vereinfacht sieht dann so aus:

[{"eintrag":"Sperrmüll bestellen"},{"eintrag":"Tablet im Flur anbringen"},{"eintrag":"Planungen für neuen Vorgarten"},{"eintrag":"Steuererklärung"}]

In in dem basic Widget - table welche JSON Objekte verarbeiten schaut das ganze dann so aus:

Vom Prinzip habe ich ein Ergebnis allerdings bin ich mit der Optik nicht zufrieden. Kann mir jemand Tipps geben oder helfen? Ich möchte gerne mehr Ähnlichkeit haben mit der Originalansicht aus Trello.

Grüße

Afroasiate

[Meistertr]

So hatte gerade eine Minute:

das in den Bereich CSS einfügen

.table-test  tbody tr {
  margin:4px;
  float:left;
  width: calc(100% - 20px);
  padding: 4px;
  background-color: rgba(255,255,255, 0.8);
  box-shadow:
    0 0px 0px 1000px rgba(255,255,255,0.1) inset,
    0 0 0 1px rgba(255,255,255,0.025) inset,
    0 3px 6px rgba(0,0,0,0.36),
    0 3px 6px rgba(0,0,0,0.43);
  border-radius:2px;
}

und dann bei den Widgeteigenschaften unter general / CSS Klasse "table-test" eingeben

[afroasiate]

Hallo,

danke für die tolle Hilfe. Vom grundsätzlichen Verständnis hat mir Dein Beitrag viel gebracht.

Kannst Du mir eventuell noch einmal helfen. Kannst Du mir sagen wieso er diese Zeilenumbrüche tätigt? Ich habe an Deinem Code noch nichts verändert.

Grüße

Afro

[Meistertr]

@afroasiate:

Hallo,

danke für die tolle Hilfe. Vom grundsätzlichen Verständnis hat mir Dein Beitrag viel gebracht.

Kannst Du mir eventuell noch einmal helfen. Kannst Du mir sagen wieso er diese Zeilenumbrüche tätigt? Ich habe an Deinem Code noch nichts verändert.

filename="Bildschirmfoto 2018-07-09 um 09.47.08.png" index="0">~~

Grüße

Afro ` Lad mal den Code vom exportieren widget hoch, dann schau ich mal, bei mir sind die Umbrüche nicht drin..

Gesendet von meinem Handy

[afroasiate]

Schon mal danke für Deine weitere Hilfe:

[{"tpl":"tplTableBody","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","static_value":"[{\"Title\": \"first\", \"Value\": 1, \"_Description\": \"Value1\"}, {\"Title\": \"second\", \"Value\": 2, \"_Description\": \"Value2\"}]","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"table_oid":"javascript.0.VIS.trello.getPosts","hide_header":false,"colName1":"Überschrift ist nicht sichtbar","colWidth1":"","colAttr1":"","show_scroll":false,"new_on_top":false},"style":{"left":"204px","top":"123px","width":"434px","height":"395px"},"widgetSet":"basic"}]

[afroasiate]

Ich kenne mich schlecht mit CSS aus aber es muss wohl etwas mit dem float Attribut zu tun haben.