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:
<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:
<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>
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
class="compress"
beim data-type="switch" hinzufügen.
Danke, das war die Lösung.....