Nur Text | Text mit Bildern

FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: locodriver am 17 Juli 2019, 15:00:06

Titel: [gelöst] Telefonliste: Gleiches Template - unterschiedliches Layout
Beitrag von: locodriver am 17 Juli 2019, 15:00:06
Hallo!

Ich suche schon einige Tage nach der Lösung und komme nicht zum Ziel.

Ich habe angefangen, Templates für verschiedene Dinge einzusetzen. Das klappt auch ganz gut, nur das Telefontemplate bringt unterschiedliche Ergebnisse.
Wenn ich es über Pagetab aufrufe, so wird die Tabelle der Anrufe wie gewünscht erstellt.
Wenn ich die Tabelle über ein Popup aus der Mainpage aufrufe, so wird die erste Zeile richtig formatiert, die anderen beginnen mit dem Icon am rechten Rand und die Textzellen rutschen in eine neue Zeile darunter.

Habt ihr eine Idee, wo der Fehler liegt?

Danke.

Hier die Codes und im Anhang die Screenshots:

Template:
Code Auswählen
<!DOCTYPE html>


<!-- FHEM Tablet UI V2.6 -->
<!-- Template für Anruf -->

<body>
<div class="row">
<div class="col-15">
<!-- Zuordnung des Status zu entsprechendem Icon -->
<div class="top-narrow"
data-type="symbol"
data-device="Anrufe"
data-get="par01"
data-states='["=>","=> X","=> ((o))","=> [=]","=> O_O","<=","<= X"]'
data-icons='["oa-phone_call_end_in","oa-phone_missed_in","oa-phone_ring fa-blink","oa-phone_ring_in fa-blink","oa-phone_answersing","oa-phone_call_end_out","oa-phone_missed_out"]'
data-colors='["green","firebrick","firebrick","green","#aa6900","blue"]'>
</div>
</div>
<div class="col-25">
<div data-type="label" data-device="Anrufe" data-get="par02" data-part="5" class=""></div>
<div data-type="label" data-device="Anrufe" data-get="par02" data-part="1" class="inline"></div>
<div data-type="label" data-device="Anrufe" data-get="par02" data-part="2" class="inline"></div>
<div data-type="label" data-device="Anrufe" data-get="par02" data-part="3" class="inline"></div>
</div>
<div class="col-35">
<div data-type="label" data-device="Anrufe" data-get="par03" class=""></div>
<div data-type="label" data-device="Anrufe" data-get="par04" class=""></div>
</div>
<div class="col-25">
<div data-type="label" data-device="Anrufe" data-get="par05" class=""></div>
</div>
</div>
</body>



Anrufseite:
Code Auswählen
<!DOCTYPE html>
<html>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="7" data-template="menu.html"></li>
<li data-row="2" data-col="1" data-sizex="6" data-sizey="4">
<header><font size="+1">Anrufe</font></header>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"1-state","par02":"1-timestamp","par03":"1-name","par04":"1-number","par05":"1-duration"}'></div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"2-state","par02":"2-timestamp","par03":"2-name","par04":"2-number","par05":"2-duration"}'></div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"3-state","par02":"3-timestamp","par03":"3-name","par04":"3-number","par05":"3-duration"}'></div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"4-state","par02":"4-timestamp","par03":"4-name","par04":"4-number","par05":"4-duration"}'></div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"5-state","par02":"5-timestamp","par03":"5-name","par04":"5-number","par05":"5-duration"}'></div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"6-state","par02":"6-timestamp","par03":"6-name","par04":"6-number","par05":"6-duration"}'></div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"7-state","par02":"7-timestamp","par03":"7-name","par04":"7-number","par05":"7-duration"}'></div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"8-state","par02":"8-timestamp","par03":"8-name","par04":"8-number","par05":"8-duration"}'></div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"9-state","par02":"9-timestamp","par03":"9-name","par04":"9-number","par05":"9-duration"}'></div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"10-state","par02":"10-timestamp","par03":"10-name","par04":"10-number","par05":"10-duration"}'></div>
</li>
</ul>
</div>
</body>
</html>





Popupaufruf aus Mainpage:
Code Auswählen
<li data-row="1" data-col="11" data-sizex="1" data-sizey="1">
<header>LETZTER ANRUF</header>
<div class="sheet">
<div class="row">
<div class="cell" data-type="popup" data-width="750px" data-height="460px">
<div data-type="push"
data-warn="countsOverall"
data-warn-off="0"
data-device="VerpassteAnrufe"
data-icon="oa-phone_call"
data-set-on="clear"
class="warn">
</div>
<div class="dialog">
<header>Anrufe</header>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"1-state","par02":"1-timestamp","par03":"1-name","par04":"1-number","par05":"1-duration"}'>
</div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"2-state","par02":"2-timestamp","par03":"2-name","par04":"2-number","par05":"2-duration"}'>
</div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"3-state","par02":"3-timestamp","par03":"3-name","par04":"3-number","par05":"3-duration"}'>
</div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"4-state","par02":"4-timestamp","par03":"4-name","par04":"4-number","par05":"4-duration"}'>
</div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"5-state","par02":"5-timestamp","par03":"5-name","par04":"5-number","par05":"5-duration"}'>
</div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"6-state","par02":"6-timestamp","par03":"6-name","par04":"6-number","par05":"6-duration"}'>
</div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"7-state","par02":"7-timestamp","par03":"7-name","par04":"7-number","par05":"7-duration"}'>
</div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"8-state","par02":"8-timestamp","par03":"8-name","par04":"8-number","par05":"8-duration"}'>
</div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"9-state","par02":"9-timestamp","par03":"9-name","par04":"9-number","par05":"9-duration"}'>
</div>
<div data-template="template_Anruf.html"
data-parameter='{"par01":"10-state","par02":"10-timestamp","par03":"10-name","par04":"10-number","par05":"10-duration"}'>
</div>
</div>
<div style="font-size:90%;" data-type="label"
data-device="Anrufe"
data-get="1-number"
class="">
</div>
<div style="font-size:90%;" data-type="label"
data-device="Anrufe"
data-get="1-name"
class="newline">
</div>
<div style="font-size:90%;" data-type="label"
data-device="Anrufe"
data-get="1-timestamp"
data-part="2"
class="inline">
</div>
<div style="font-size:90%;" data-type="label"
data-device="Anrufe"
data-get="1-timestamp"
data-part="3"
class="inline">
</div>
<div style="font-size:90%;" data-type="label"
data-device="Anrufe"
data-get="1-timestamp"
data-part="5"
class="inline">
</div>
</div>
</div>
</div>
</li>
Titel: Antw:Telefonliste: Gleiches Template - unterschiedliches Layout
Beitrag von: locodriver am 02 August 2019, 17:29:19
Ich möchte mein Problem nochmal pushen...

Über 100 views und keiner hat eine Idee, wo der Fehler steckt...? Ich trete leider immer noch auf der Stelle.

Danke für eure Hilfe.
Uwe
Titel: Antw:Telefonliste: Gleiches Template - unterschiedliches Layout
Beitrag von: Vaddi am 03 August 2019, 13:46:44
Hey, versuch mal bitte deinen Popupaufruf wie folgt zu ändern.

Code Auswählen
<li data-row="1" data-col="11" data-sizex="1" data-sizey="1">
<header>LETZTER ANRUF</header>
<div class="sheet">
<div class="row">
<div class="cell" data-type="popup" data-width="800px" data-height="460px">
<div data-type="push"
data-warn="countsOverall"
data-warn-off="0"
data-device="VerpassteAnrufe"
data-icon="oa-phone_call"
data-set-on="clear"
class="warn">
</div>
<div class="dialog">
<header>Anrufe</header>
<div class="row">
<div data-template="template_Anruf.html"
data-parameter='{"par01":"1-state","par02":"1-timestamp","par03":"1-name","par04":"1-number","par05":"1-duration"}'>
</div>
</div>
<div class="row">
<div data-template="template_Anruf.html"
data-parameter='{"par01":"2-state","par02":"2-timestamp","par03":"2-name","par04":"2-number","par05":"2-duration"}'>
</div>
</div>
<div class="row">
<div data-template="template_Anruf.html"
data-parameter='{"par01":"3-state","par02":"3-timestamp","par03":"3-name","par04":"3-number","par05":"3-duration"}'>
</div>
</div>
<div class="row">
<div data-template="template_Anruf.html"
data-parameter='{"par01":"4-state","par02":"4-timestamp","par03":"4-name","par04":"4-number","par05":"4-duration"}'>
</div>
</div>
<div class="row">
<div data-template="template_Anruf.html"
data-parameter='{"par01":"5-state","par02":"5-timestamp","par03":"5-name","par04":"5-number","par05":"5-duration"}'>
</div>
</div>
<div class="row">
<div data-template="template_Anruf.html"
data-parameter='{"par01":"6-state","par02":"6-timestamp","par03":"6-name","par04":"6-number","par05":"6-duration"}'>
</div>
</div>
<div class="row">
<div data-template="template_Anruf.html"
data-parameter='{"par01":"7-state","par02":"7-timestamp","par03":"7-name","par04":"7-number","par05":"7-duration"}'>
</div>
</div>
<div class="row">
<div data-template="template_Anruf.html"
data-parameter='{"par01":"8-state","par02":"8-timestamp","par03":"8-name","par04":"8-number","par05":"8-duration"}'>
</div>
</div>
<div class="row">
<div data-template="template_Anruf.html"
data-parameter='{"par01":"9-state","par02":"9-timestamp","par03":"9-name","par04":"9-number","par05":"9-duration"}'>
</div>
</div>
<div class="row">
<div data-template="template_Anruf.html"
data-parameter='{"par01":"10-state","par02":"10-timestamp","par03":"10-name","par04":"10-number","par05":"10-duration"}'>
</div>
</div>
</div>
<div style="font-size:90%;" data-type="label"
data-device="Anrufe"
data-get="1-number"
class="">
</div>
<div style="font-size:90%;" data-type="label"
data-device="Anrufe"
data-get="1-name"
class="newline">
</div>
<div style="font-size:90%;" data-type="label"
data-device="Anrufe"
data-get="1-timestamp"
data-part="2"
class="inline">
</div>
<div style="font-size:90%;" data-type="label"
data-device="Anrufe"
data-get="1-timestamp"
data-part="3"
class="inline">
</div>
<div style="font-size:90%;" data-type="label"
data-device="Anrufe"
data-get="1-timestamp"
data-part="5"
class="inline">
</div>
</div>
</div>
</div>
</li>


</li>
Titel: Antw:Telefonliste: Gleiches Template - unterschiedliches Layout
Beitrag von: locodriver am 04 August 2019, 09:42:51
@Vaddi: Dankschön, das war's. Auf eine "extra" Kapselung wäre ich sicher im Leben nicht gekommen...

Schönen Sonntag!
Nur Text | Text mit Bildern