Symbol Widgets zu gross bei kleinen Icons

[BlackHawk133]

Hallo,

ich habe heute meine FB_Calllist Anzeige im tabletui anpassen müssen. Bisher hatte ich hier eine sehr platzsparende Anzeige der MissedCalls. Jetzt brauche ich auch die Incoming Calls, daher will ich ein Icon des CallTyps mit integrieren. ABER: jedesmal wenn ich ein Icon in die Tabelle aufnehme explodiert die Höhe jedes Eintrags und passt nicht mehr auf den reservierten Tablet Space. Ich habe schon eigene kleine Icons definiert - hilft alles NIX. Die tabletUI Widgets haben ein Eigenleben.... Es scheint sowas wie eine Mindesthöhe zu geben, unter die ich nicht komme. Kann mir jemand helfen?

Hier der Code für die Icon Definition:

Code Auswählen Erweitern

<style type="text/css" style="font-size:140%">
.outgoingCall {background: url(icons/OutgoingCall.png) no-repeat; width: 38px; height: 25px; background-size: contain; }
.incomingCall {background: url(icons/IncomingCall.png) no-repeat; width: 38px; height: 25px; background-size: contain; }
.missedCall {background: url(icons/IncomingCall_m.png) no-repeat; width: 38px; height: 25px; background-size: contain; }
scroll="no"
</style>


Hier der Code für die Liste:

Code Auswählen Erweitern

<header class="headerTransparent">Anrufe</header>
<table width="100%" class="">
<tr>
<td>
<div data-type="switch" data-device="AnruflisteReal" data-get="1-state" data-background-icon=""
data-states='["=> O_O",   "<=",          "=>",          "=> X",      "=>  ((o))",   "<= ((o))",    "=>  [=]",     "<=  [=]",     "<= X"]'
data-icons='["missedCall","outgoingCall","incomingCall","missedCall","incomingCall","outgoingCall","incomingCall","outgoingCall","outgoingCall"]'
data-colors='["red",      "green",       "green",       "red",       "yellow",      "yellow",      "green",       "green",       "white"]'
data-class="">
</div>
</td>

<td>
<div data-type="label" data-device="AnruflisteReal" data-get="1-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="1-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="1-timestamp" data-part="3" class="inline"></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="1-timestamp" data-part="5" class=""></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="1-name"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="1-number"></div>
</td>
</tr>
<tr>
<td>
<div data-type="switch" data-device="AnruflisteReal" data-get="2-state" data-background-icon=""
data-states='["=> O_O",   "<=",          "=>",          "=> X",      "=>  ((o))",   "<= ((o))",    "=>  [=]",     "<=  [=]",     "<= X"]'
data-icons='["missedCall","outgoingCall","incomingCall","missedCall","incomingCall","outgoingCall","incomingCall","outgoingCall","outgoingCall"]'
data-colors='["red",      "green",       "green",       "red",       "yellow",      "yellow",      "green",       "green",       "white"]'
data-class="">
</div>
</td>

<td>
<div data-type="label" data-device="AnruflisteReal" data-get="2-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="2-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="2-timestamp" data-part="3" class="inline"></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="2-timestamp" data-part="5" class=""></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="2-name"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="2-number"></div>
</td>
</tr>
<tr>
<td>
<div data-type="switch" data-device="AnruflisteReal" data-get="3-state" data-background-icon=""
data-states='["=> O_O",   "<=",          "=>",          "=> X",      "=>  ((o))",   "<= ((o))",    "=>  [=]",     "<=  [=]",     "<= X"]'
data-icons='["missedCall","outgoingCall","incomingCall","missedCall","incomingCall","outgoingCall","incomingCall","outgoingCall","outgoingCall"]'
data-colors='["red",      "green",       "green",       "red",       "yellow",      "yellow",      "green",       "green",       "white"]'
data-class="">
</div>
</td>

<td>
<div data-type="label" data-device="AnruflisteReal" data-get="3-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="3-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="3-timestamp" data-part="3" class="inline"></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="3-timestamp" data-part="5" class=""></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="3-name"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="3-number"></div>
</td>
</tr>
<tr>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="4-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="4-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="4-timestamp" data-part="3" class="inline"></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="4-timestamp" data-part="5" class=""></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="4-name"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="4-number"></div>
</td>
</tr>
</table>


[setstate]

Symbol, Switch und co reservieren immer 2em Platz, damit Backgroundicon und Icon rein passen.
Wenn man nur das Icon benutzen will und sich den Platz für das backgroundicon sparen will, muss man

Code Auswählen Erweitern

class="compress"

beim data-type="switch" hinzufügen.

[BlackHawk133]

Danke, das war die Lösung.....