Hallo,
ich versuche, folgende Kombination in einem Grid-Feld unterzubringen: Symbol - Label - Symbol
Also 3 Elemente nebeneinander. Das klappt auch (mit inline). Allerdings ist vor dem linken Symbol eine Menge Platz. Je nach Inhalt des Labels wird dann das 2. Symbol in die nächste Zeile umgebrochen
Wie kann ich den Abstand zum linken Rand verringern (ohne left-narrow). Es muss doch möglich sein, ein Element linksbündig zu platzieren. Ich habe schon left-align probiert. Das hat keinerlei Effekt
Gib mal den Code.
HTML hat verschiedne Ansätze zur Positionierung. Je nach Art die du gewählt hast, funktionieren nur bestimmte Eigenschaften.
So siehts aus:
<div data-type="symbol"
data-icon="flaticon-thermometer49"
data-on-color="white"
data-off-color="white"
class="big inline">
</div>
<div data-type="label"
data-device="d_weather"
data-get="actual_th0_temp_c"
data-unit="%B0C"
class="big inline">
</div>
<div data-type="symbol" data-device="d_weather"
data-get="last60m_th0_temp_trend"
data-states='["-1", "0", "1"]'
data-icons='["fa-caret-down", "fa-caret-right", "fa-caret-up"]'
data-colors='["#0000ff", "#ffffff", "#ff0000"]'
class="big left-narrow-2x inline">
</div>
Ich habe auch schon versucht, das nochmal in ein globales div zu packen und dort left-align anzugeben. Wird völlig ignoriert.
Im Endeffekt soll ein Thermometersymbol gefolgt von der aktuellen Temperatur und einer Pfeilspitze für den Trend angezeigt werden.
Bin jetzt am überlegen, ob das Symbol-Widget hier überhaupt die richtige Wahl ist. Vielleicht sollte ich einfach einen Dummy Tag wie span oder i und der Icon-Class einbauen.
jetzt weiß ich nicht, was noch drum herum ist, oder ob das direkt in einem Gridster Element liegt und wie groß das wieder ist. Aber in einem Gridster liegt erst einmal alles horizontal mittig. Deshalb ist das erste Icon auch soweit rechts. Wenn alles weiter ausseinander sein soll, würde ich ein col Layout nutzen. Das Label bekommt 1/2 des Platzes, die Symbole je 1/5-tel
<div data-type="symbol"
data-icon="flaticon-thermometer49"
data-on-color="white"
data-off-color="white"
class="big col-1-5">
</div>
<div data-type="label"
data-device="d_weather"
data-get="actual_th0_temp_c"
data-unit="%B0C"
class="big col-1-2">
</div>
<div data-type="symbol" data-device="d_weather"
data-get="last60m_th0_temp_trend"
data-states='["-1", "0", "1"]'
data-icons='["fa-caret-down", "fa-caret-right", "fa-caret-up"]'
data-colors='["#0000ff", "#ffffff", "#ff0000"]'
class="big col-1-5">
</div>
Ja, liegt direkt in einem Gridster. Das Col-Layout werden ich mal versuchen.
Wenn ich folgendes Konstrukt baue, werden die labels in den beiden Spalten immer untereinander dargestellt, egal wie breit das Grid ist. Wie bekomme ich die Spalten nebeneinander?:
<div class="row">
<div class="col-1-2">
<div data-type="label" ...></div>
</div>
<div class="col-1-2">
<div data-type="label" ...></div>
</div>
</div>
UPDATE: Wenn ich statt col-1-2 col-1-3 benutze geht es. Wozu gibt es col-1-2 überhaupt, wenn er dann immer die Spalten umbricht? Habe jetzt table mit td width=50% verwendet. Das funktioniert.
Ist beim Label auch kein class dabei?
Das wird sogar umgebrochen, wenn ich in die Spalten keine Label sondern nur "S1" und "S2" als Text reinschreibe. Aber ich habe es jetzt gefunden: Irgendwo in der CSS-Hierarchie scheint ein ziemlicher großer Rand für ein Grid definiert zu werden. Ein style="margin: 0px 0px 0px 0px !important;" in einem div um die Tabelle rum hat dem Spuk nun ein Ende gemacht.