data-type="symbol" / Größe veränderbar?

[Pi_01]

Hallo,
ich habe mir eigene Icons (JPG-Bilder) gebastelt, die ich mit eigenen CSS-Klassen definierte.

Code Auswählen Erweitern

.meineCSSklasse{
width: 200px;
        height: 150px;
        border-style: dotted;
        background: url(http://meineURL.jpg) no-repeat;
}

Wenn ich die Icons mit

Code Auswählen Erweitern

data-type="symbol"
einbinde, dann wird mein Icon (es ist eigentlich schon ein Bild, da 200px breit) nur zu einem Bruchteil angezeigt.

Ich habe den Eindruck, dass die Definition data-type="symbol" bewirkt, dass das "Icon" nicht mehr als 50 (?) px breit sein darf.

Wie kann ich das Problem lösen?

[yersinia]

Ein Auszug deines HTML codes mit diesem symbol widget wäre interessant. Darüberhinaus solltest du die Größendefinition analysieren.

Ein symbol widget erbt die width und hight als 2em (2-fache font-größe) von der fa-stack klasse.

Im Übrigen kennt das symbol-widget kein background image und auch kein data-class[es] attribut. Vielleicht kannst du das label widget für dein Vorhaben missbrauchen.

[Pi_01]

Vielleicht kannst du das label widget für dein Vorhaben missbrauchen.

Ich benötige aber eine Abhängigkeit, d.h. je nach Wert soll ein anderes Icon/Bild angezeigt werden.

Mein Code sah bisher so aus:

Code Auswählen Erweitern

<div data-type="symbol"
data-device="meinDevice"
data-get="value"
data-states='[0,10,20]'
data-icons='["meineCSSklasse","meineCSSklasse2","meineCSSklasse3"]'>
</div>

Ich wüsste jetzt nicht, wie ich das auf in einem Label abbilden kann.

[yersinia]

Mein Code sah bisher so aus:

Code Auswählen Erweitern

<div data-type="symbol"
data-device="meinDevice"
data-get="value"
data-states='[0,10,20]'
data-icons='["meineCSSklasse","meineCSSklasse2","meineCSSklasse3"]'>
</div>

Das funktioniert so nicht, da die Icons nicht derart eingebunden werden. Du müsstest dem symbol-div ebenso eine class mit der entsprechenden Größe mitgeben. Dann kann es funktionieren, wage ich aber zu bezweifeln.

Ja, im Nachhinein kann das label widget auch nicht funktionieren, da es immer einen Wert anzeigt, ansonsten hätte ich es so versucht (ungetestet):

Code Auswählen Erweitern

<div data-type="label"
data-device="meinDevice"
data-limits-get="value"
data-limits='[0,10,20]'
data-classes='["meineCSSklasse","meineCSSklasse2","meineCSSklasse3"]'>
</div>
Eventuell mit data-substitution den text nachbearbeiten.

Du könntest aber auch mit dem image widget arbeiten und einem dummy, der über ein Reading die url zur Verfügung stellt.

[Pi_01]

Du könntest aber auch mit dem image widget arbeiten und einem dummy, der über ein Reading die url zur Verfügung stellt.

Danke für den Tipp!