Höhe des Sheets wird falsch berechnet

Mave · 02 Oktober 2017, 10:32:07

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

Code Auswählen

<div class="sheet" style="height: calc(100% - 22px);">

das hier geworden ist

Code Auswählen

<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

setstate · 02 Oktober 2017, 16:13:16

das passier bestimmt durch Zeile 529

Code Auswählen

      
$(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 ...

Mave · 02 Oktober 2017, 19:54:54

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

Mave · 06 Oktober 2017, 10:00:38

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

setstate · 06 Oktober 2017, 10:43:29

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 ... 🤔

Mave · 06 Oktober 2017, 14:18:03

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

Mave · 06 Oktober 2017, 21:27:22

Ich habe alle Unterseiten auf nocache gesetzt und jetzt funktioniert es....

Heiner33 · 08 Oktober 2017, 17:49:28

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.

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

setstate · 09 Oktober 2017, 23:22:36

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?

Code Auswählen


<!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>

Heiner33 · 10 Oktober 2017, 19:54:23

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

Code Auswählen

<!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

Code Auswählen

<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

Code Auswählen

<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&uuml;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

Code Auswählen

<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>

Standarduser · 10 Oktober 2017, 20:24:48

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.

Heiner33 · 13 Oktober 2017, 18:29:09

@setstate: Konntest du den Fehler schon mit meinem Beispiel reproduzieren oder kann ich dir noch irgendwie helfen?

Danke und Grüße

münster · 20 Oktober 2017, 20:31:45

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:

Code Auswählen

<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="&deg;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="&percnt;" data-get="humidity" class="darker inline"></div>
</div>

</div>
</div>

</li>

Heiner33 · 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

Standarduser · 24 Oktober 2017, 21:32:42

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?