Hallo zusammen,
ich habe seit einigen Tagen Probleme mit der Darstellung in FTUI.
Wenn ich die FTUI Seite im Windows Browser aktualisiere, sieht alles ganz normal aus. Wenn ich dann verschiedene Untermenüs anklicke, erscheinen irgendwann mal die Scrollbalken des Browsers, weil sich Abstände der Zellen vergrößert haben und alle Symbole nach unten gerutscht sind.
Schaue ich mir das mit einem Entwicklungstool an, fällt mir auf, dass aus
<div class="sheet" style="height: calc(100% - 22px);">
das hier geworden ist
<div class="sheet" style="height: calc(100% - 0px);">
Die Höhe der sheets werden also falsch berechnet und damit rutscht alles nach unten und die Scrollbalken des Browsers erscheinen.
Hat jemand eine Idee, wie das passieren kann?
Vielen Dank.
Grüße Mave
das passier bestimmt durch Zeile 529
$(this).css({
'height': 'calc(100% - ' + $(this).siblings('header').outerHeight() + 'px)'
});
Aber warum bei dir der Header 0px hoch ist, kann ich mir noch nicht erklären.
Sowas passiert, wenn das Element gerade unsichtbar ist, wenn die Höhe abgefragt wird. Das kann aber an dieser Stelle nicht mehr sein ...
Guten Abend setstate,
vielen Dank für Deine schnelle Rückmeldung.
Hast Du diesen Part erst kürzlich geändert, weil das erst jetzt bei mir auftritt oder habe ich etwas verbogen?
Grüße Mave
Moin setstate,
kann ich irgendetwas tun, damit ich das Problem in den Griff bekomme?
Vielen Dank für eine kurze Rückmeldung.
Grüße Mave
Solche kruden Fehler bekommt man leider nur durch aufwändiges Debbuging in den Griff. Am besten ist, console.log() Zeilen an die entsprechenden Punkte, die bei den Unterseitenaufrufen durchlaufen werden, einzubauen, um sich aktuelle Parameter und die zeitlichen Abläufe anzuzeigen. Frag mich aber bitte nicht nach den genauen Stellen ... 🤔
Nützt Dir eventuell der Hinweis etwas, dass, wenn das Problem auftritt, immer nur die Felder der Unterseiten betroffen sind?
Ich nutze eine feststehende linke Spalte, obere Zeile und rechte Spalte, die immer gleich bleiben.
Per Pagebutton werden immer nur die Unterseiten mit den innenliegenden Feldern eingeblendet. Das hat bisher wunderbar funktioniert.
Ich habe noch kein System entdecken können, nach welchem Muster oder wann das Problem auftritt. Nach ein bis zwei Seitenwechseln tritt das Problem auf und ist dann bei allen Unterseiten vorhanden.
Grüße Mave
Ich habe alle Unterseiten auf nocache gesetzt und jetzt funktioniert es....
Hallo,
das gleiche Problem scheint auch beim Popup-Widget aufzutreten. Hier scheint auch der Header mit 0px berechnet zu werden, was dafür sorgt, dass in jedem Popup ein Scrollbalken angezeigt wird, ziemlich unschön. :o
Reproduzieren könnt ihr das eigentlich ganz einfach z.B. mit dem Beispielcode für ein Popup:
https://github.com/knowthelist/fhem-tablet-ui/wiki/Popup
Edit:
Auch bei anderen Widgets habe ich das Problem, meist wenn ich irgendwie die Klasse "center" einsetze und via Pagebutton auf eine zuvor besuchte Seite "zurück navigiere" und nicht "nocache" gesetzt habe, siehe auch Screenshots.
Hatte zuvor fhem-tablet-ui.js in Version 2.6.17 im Einsatz und heute ein Update auf die .28 gemacht und diesen Fehler bemerkt.
Hoffe das hilft, den Fehler zu beheben. Kann gerne noch etwas testen, falls das hilft...
Grüße
Ich kann das Problem leider immer noch nicht nachvollziehen. Auch nicht mit dem Popup-Beispiel.
Könnt ihr diese Beispiel ergänzen, damit der Fehler sichtbar wird?
<!DOCTYPE html>
<html>
<head>
<script src="js/fhem-tablet-ui.js" defer></script>
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="5" data-col="1" data-sizex="3" data-sizey="3">
<header>EXAMPLE2</header>
<!-- place your widget here -->
<div class="center bg-green" data-type="popup" data-height="400px" data-width="200px">
<div class="large white" data-type="link">Show Temperatur</div>
<div class="dialog">
<header>DIALOG</header>
<div class="top-space">
<div class="newline">
<div data-type="label" data-device="THSensorWZ" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="bigger thin"></div>
<div data-type="label" class="cell">Temperatur</div>
</div>
<div class="newline">
<div data-type="label" data-device="THSensorWZ" data-fix="0" data-part="4" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="bigger thin"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</div>
<div data-type="link" class="round top-space-3x left-space-2x" data-width="130" data-height="50" data-color="white" data-background-color="green" data-icon="fa-check" onclick="$('.dialog-close').trigger('click');">OK</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Hallo setstate,
vielen Dank für deine Antwort. Um den Fehler nachvollziehen zu können, habe ich dir folgend ein Beispiel mit Pagebuttons aufgebaut.
Getestet habe ich mit Chrome.
Schritte zum Reproduzieren:
- Direkt die Seite test_index.html#test_page2.html aufrufen (also direkt auf Page2 einsteigen)
- Unten den Müllkalender beachten, sollte alles zentriert und in Ordnung aussehen
- Über Pagebutton "Home" auf eine andere Seite wechseln
- Kurzen Moment warten
- Über Pagebutton "Page2" wieder zurück zur anderen Seite wechseln
- Jetzt sollte unten der Müllkalender verschoben sein
- Zusätzlich müsste auch der untere Rand in "Block 3" nach unten verzerrt sein
Hier die Quellcodes der vier Seiten.test_index.html<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.6.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="widget_base_width" content="37">
<meta name="widget_base_height" content="35">
<meta name='gridster_disable' content='1'>
<meta name='gridster_resize' content='0'>
<meta name='debug' content='2'>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="js/fhem-tablet-ui.js" defer></script>
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>
<!-- ============ Menu ==================== -->
<!-- ====================================== -->
<li data-row="1" data-col="1" data-sizex="4" data-sizey="15">
<header>Menu</header>
<div class="sheet">
<div class="row">
<div data-type="pagebutton" data-url="#test_page1.html" data-load="#test_page1" data-active-pattern="(.*/||.*#test_page1.html)" data-icon="fa-home" class="large cell-1-2 notitle" data-on-background-color="orange" data-off-background-color="#505050" data-on-color="#2A2A2A" data-off-color="#2A2A2A"></div>
<div data-type="label" class="darker cell-2-2 left-align">Home</div>
</div>
<div class="row">
<div data-type="pagebutton" data-url="#test_page3.html" data-load="#test_page3" data-active-pattern="(.*/||.*#test_page3.html)" data-icon="fa-home" class="large cell-1-2 notitle" data-on-background-color="orange" data-off-background-color="#505050" data-on-color="#2A2A2A" data-off-color="#2A2A2A"></div>
<div data-type="label" class="darker cell-2-2 left-align">blablabla</div>
</div>
<div class="row">
<div data-type="pagebutton" data-url="#test_page2.html" data-load="#test_page2" data-active-pattern="(.*/||.*#test_page2.html)" data-icon="fa-group" class="large cell-1-2 notitle" data-on-background-color="orange" data-off-background-color="#505050" data-on-color="#2A2A2A" data-off-color="#2A2A2A"></div>
<div data-type="label" class="darker cell-2-2 left-align">page2</div>
</div>
</div>
</li>
<li data-row="1" data-col="5" data-sizey="17" data-sizex="23">
<div class="page" id="test_page1"></div>
<div class="page" id="test_page2"></div>
<div class="page" id="test_page3"></div>
</li>
</ul>
</div>
</body>
</html>
test_page1.html<div class="page" id="test_page1">
<div class="gridster">
<ul>
<li data-row="5" data-col="1" data-sizex="3" data-sizey="3">
<header>EXAMPLE2</header>
<!-- place your widget here -->
<div data-type="label" class="cell">Jetzt wieder links im Menue auf Page2 zurueck gehen!</div>
</li>
</ul>
</div>
</div>
test_page2.html<div class="page" id="test_page2">
<div class="gridster">
<ul>
<li data-row="1" data-col="6" data-sizex="5" data-sizey="3">
<header>block 9</header>
<div data-type="label" class="cell">Jetzt links auf Home klicken, kurz warten und dann wieder den Page2 pagebutton druecken und dann sollte unten der Muellkalender verschoben sein</div>
</li>
<li data-row="1" data-col="1" data-sizex="5" data-sizey="3">
<header>block 8</header>
</li>
<li data-row="4" data-col="1" data-sizex="5" data-sizey="4">
<header>block 7</header>
</li>
<li data-row="1" data-col="11" data-sizex="6" data-sizey="3">
<header>block 6</header>
</li>
<li data-row="4" data-col="11" data-sizex="6" data-sizey="4">
<header>block 5</header>
</li>
<li data-row="8" data-col="11" data-sizex="6" data-sizey="7">
<header>block 4</header>
</li>
<li data-row="4" data-col="6" data-sizex="5" data-sizey="4">
<header>block 3</header>
<div class="center bg-green" data-type="popup" data-height="400px" data-width="200px">
<div class="large white" data-type="link">Show Temperatur</div>
<div class="dialog">
<header>DIALOG</header>
<div class="top-space">
<div class="newline">
<div data-type="label" data-device="THSensorWZ" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="bigger thin"></div>
<div data-type="label" class="cell">Temperatur</div>
</div>
<div class="newline">
<div data-type="label" data-device="THSensorWZ" data-fix="0" data-part="4" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="bigger thin"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</div>
<div data-type="link" class="round top-space-3x left-space-2x" data-width="130" data-height="50" data-color="white" data-background-color="green" data-icon="fa-check" onclick="$('.dialog-close').trigger('click');">OK</div>
</div>
</div>
</div>
</li>
<li data-row="8" data-col="1" data-sizex="10" data-sizey="7">
<header>block 2</header>
</li>
<li data-row="15" data-col="1" data-sizex="16" data-sizey="3">
<header>Garbage</header>
<div class="sheet">
<div class="row center">
<div class="left right-space">
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#505050" data-on-background-color="#505050" data-device="MuellterminDummy" data-get='GelberSack' data-off-color="#E6E600" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["#E6E600","#E6E600","#E6E600"]' class="big"></div>
<div data-type="label" class="darker ">Gelber Sack</div>
</div>
<div class="left left-space right-space">
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#505050" data-on-background-color="#505050" data-device="MuellterminDummy" data-get='Bio' data-off-color="#996633" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["#996633","#996633","#996633"]' class="big"></div>
<div data-type="label" class="darker ">Biotonne</div>
</div>
<div class="left left-space right-space">
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#505050" data-on-background-color="#505050" data-device="MuellterminDummy" data-get='Papiertonne' data-off-color="#4747D1" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["#4747D1","#4747D1","#4747D1"]' class="big"></div>
<div data-type="label" class="darker ">Papiertonne</div>
</div>
<div class="left left-space right-space">
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#505050" data-on-background-color="#505050" data-device="MuellterminDummy" data-get='Restmuell' data-off-color="grey" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["gray","gray","gray"]' class="big"></div>
<div data-type="label" class="darker ">Restmüll</div>
</div>
<div class="left left-space right-space">
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#505050" data-on-background-color="#505050" data-device="MuellterminDummy" data-get='Garten' data-off-color="#996633" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["#996633","#996633","#996633"]' class="big"></div>
<div data-type="label" class="darker ">Garten</div>
</div>
<div class="left left-space">
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#505050" data-on-background-color="#505050" data-device="MuellterminDummy" data-get='Papier' data-off-color="#4747D1" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["#4747D1","#4747D1","#4747D1"]' class="big"></div>
<div data-type="label" class="darker ">Papier</div>
</div></div>
</div>
</li>
<li data-row="1" data-col="17" data-sizex="7" data-sizey="17">
<header>block 1</header>
</li>
</ul>
</div></div>
test_page3.html<div class="page" id="test_page3">
<div class="gridster">
<ul>
<li data-row="5" data-col="1" data-sizex="3" data-sizey="3">
<header>EXAMPLE2</header>
<!-- place your widget here -->
<div data-type="label" class="cell">diese seite tut zwar nichts zu sache, aber scheint wohl noetig zu sein, um den fehler gezielt zu reproduzieren.</div>
</li>
</ul>
</div>
</div>
Hallo zusammen,
ich habe den von Heiner33 geposteten Code ausprobiert. Code-Fehler konnte ich darin keine finden, das Problem jedoch nachstellen.
Meine Erkenntnisse:
Es kam mir schon immer komisch vor, wenn eine Gridster-Seite innerhalb einer Gridster-Seite aufgerufen wird. Das habe ich hier schon ein paar mal gesehen. Ich weiß, dass das so im Wiki steht, dennoch habe ich meine Zweifel daran, ob das richtig ist und auch die Vermutung, dass das die Ursache des Problems ist.
Wenn ich bei der test_index.html Gridster und alle UL-Tags und LI-Tags entferne, tritt das Problem nämlich nicht mehr auf.
Mein Lösungsvorschlag wäre also, in der Startseite ohne Gridster auszukommen. Es macht aus meiner Sicht eigentlich auch kein Sinn, dort Gridster zu verwenden, denn außer dem Menü werden ja keine Elemente platziert. Die Unterseiten können dann natürlich mittels Gridster aufgebaut werden.
Ich hoffe, diese Erkenntnis (oder Vermutung) hilft Euch ein Stück weiter.
@setstate: Konntest du den Fehler schon mit meinem Beispiel reproduzieren oder kann ich dir noch irgendwie helfen?
Danke und Grüße
Hi,
habe seit meinem Update gestern vermutlich auch ein ähnliches Problem.
NUtze eine TabletUI mit Pagebuttons und nach einigen Navigationen zwischen den Seiten rutscht irgendwann der Inhalt mancher Blöcke nach "unten raus". Verdächtigerweise genau die Anzahl an Pixeln, die der Header einnimmt.
Im Anhang ein Screenshot wie es normal aussieht und wenn es kaputt ist.
@Heiner33 @setstate: Habt ihr eine Lösung für das Problem gefunden?
Danke euch!!!
Hier der Quellcode des Blocks:
<li data-row="3" data-col="16" data-sizex="6" data-sizey="2">
<header>Light (Ceiling)</header>
<div class="sheet">
<div class="row">
<div class="cell-25">
<div data-type="switch" style="font-size:30px" data-device="Lamp_Bathroom" data-get="state"
data-set-on="pwr1" data-set-off="pwr0" data-icon="fa-lightbulb-o" data-background-icon="fa-circle" class="darker normal inline" data-on-background-color="orange" data-off-background-color="#505050" data-on-color="#2a2a2a" data-off-color="#2a2a2a"></div>
</div>
<div class="cell-25">
<div data-type="symbol" data-device="Lamp_Bathroom" data-get="motion" data-states='["1","0"]' data-icons='["fs-people_sensor","fs-motion_detector"]' data-color="#505050" class="inline "></div>
</div>
<div class="cell-50">
<div data-type="label" class="darker inline">Temp: </div>
<div data-type="label" data-device="Lamp_Bathroom" data-unit="°C" data-get="temperature" class="darker inline"></div>
<div class="newline" />
<div data-type="label" class="darker inline">Humid: </div>
<div data-type="label" data-device="Lamp_Bathroom" data-unit="%" data-get="humidity" class="darker inline"></div>
</div>
</div>
</div>
</li>
Nein, ich konnte das Problem bisher leider auch nicht lösen, nur nachstellen (siehe Beispiel-Code von mir weiter oben).
Ich warte leider auch noch auf Hilfe von den Experten hier :'(
Grüße
Zitat von: Heiner33 am 23 Oktober 2017, 17:37:42
Nein, ich konnte das Problem bisher leider auch nicht lösen, nur nachstellen (siehe Beispiel-Code von mir weiter oben).
Ich warte leider auch noch auf Hilfe von den Experten hier :'(
Grüße
Warum folgst du nicht meinem Rat und verzichtest auf Gridster in der index.html?
Das ist doch da überhaupt nicht notwendig.
Oder sind zu meiner Beschreibung Fragen offen geblieben?
Standarduser,
ich habe mich mit dem Problem in letzter Zeit nicht mehr beschäftigt, weil ich mit "nocache" das Problem für mich lösen konnte.
Meine index.html enthält einen Rahmen von einer Zelle Breite. Die verschiedenen Unterseiten werden innerhalb des Rahmens eingeblendet.
Ob ich das ohne Gridster hinbekomme, weiß ich noch nicht.
Ich werde mir Deinen Vorschlag auf jeden Fall nochmal anschauen.
Was mich nur wundert, dass das Problem erst seit ein paar Wochen auftritt und davor alles problemlos funktioniert hat.
Davor gab es ja auch schon Gridster in Gridster, oder nicht?
Vielen Dank.
Grüße Mave
Hallo zusammen,
gibt es zu dem Problem schon einen neuen Status?
Das nocache Attribut erzeugt an anderen Stellen Probleme und kann nicht die finale Lösung sein.
Kann bitte jemand detailliert erklären, wie man die index Seite ohne Gridster bauen muss?
Vielen Dank.
Grüße Mave
das liegt aber am nicht vorhandenen Höhenwert des Elements, wenn es versteckt ist. Dadurch wird die Korrektur-Rechnung falsch ausgeführt. Ohne Korrektur ist die Höhe des Elements mit .center 100% vom Parent + Header, also größer als Parent.
Eine weitere Lösung wäre, die Höhe solcher Elemente mit Festwert festzulegen, anstatt berechnen zu lassen. Zum Beispiel mit .row-85
<div class="center row-85 bg-green" ...
Moin setstate,
vielen Dank für Deine Rückmeldung.
Allerdings verstehe ich als Laie nicht, was ich jetzt tun muss. :-[
Grüße Mave
Die Elemente sind ja nicht versteckt, erscheinen zum Zeitpunkt der Berechnung aber offensichtlich als versteckt.
Könnte die Ursache darin liegen, dass die Umschaltung zwischen den Unterseiten zu schnell abläuft?
Kannst Du eine Aussage zu dem Gridster Thema machen? Könnte das die Ursache sein?
ich habe jetzt mal versucht, die Reihenfolge der Aufrufe etwas zu optimieren. Vllt. ist das Endergebnis jetzt besser. (kurz verschoben wird es aber noch aufblitzen, dann aber sofort korrigiert)
Super, vielen Dank.
Ist morgen im Update?
Hallo,
ich habe genau das selbe Problem.
Wenn ich jedoch "<header>Menu</header>" aus der Menu.html raus nehmen dann sieht es gut aus.
Ich denke aber nicht, dass dies die Lösung sein sollte.
Kann mir jemand bei einer Lösung helfen? Würde mich sehr freuen.
Hatte dasselbe Problem bei <sheet><row><cell> in einem Popup. Verwendet wurde nur dieses eine sheet. Ich konnte immer um die Höhe des Header scrollen. Geholfen hat folgender Workaround:
Folgendes zu user-tablet-ui.css hinzufügen
.sheet {
height: 95%;
}
Ich bin noch am Anfang meiner TabletUI und hoffe ich hab mir damit nichts anderes zerschossen ;)