Anfänger: Unerwartete Scrollleisten

[curt]

Alter Mann - neues Problem.
Kann man FTUI zwingen, sich an eine formale globale Formatbegrenzung zu halten?

Ich habe kein Tablet im Einsatz. Sondern Rasperry Pi 3+ mit deren originalem 7"-Touchscreen-Monitor 800x480.

In ziemlich vielen Versuchen habe ich es geschafft, dass das Layout passte. Aber stochastisch gab es immer mal wieder rechts und dann immer gleichzeitig unten Scroll-Leisten: Es geht offensichtlich um ein (oder wenige) Pixel, die FTUI zusätzlich beansprucht. Der Content kann nicht auf 800x480 dargestellt werden. Mal geht es, mal geht es nicht.

Es gibt da die schönsten Seiteneffekte: Mal ist es die geänderte Ausgabe einer data-device. Oft ist es der Header-Tag: Ich kann nachvollziehbar zeigen, dass _header_Kette_/header Scrollleisten erzwingt, aber _header_Kette X_/header_ das nicht tut. Anders gesagt: Header als Einzelwort tut nicht immer. Aber wenn ich das Einzelwort mit einem Leerzeichen und mit noch einem Buchstaben verbinde - dann geht es wieder.

Mir ist schon klar, was css und js ist. Und was es bedeutet, mehrere css und mehrere js in eine Seite zu laden. Also den Teil der Fehlersuche vergessen wir ganz schnell.

Aber gibt es eine Chance, FTUI zwingen, sich an eine formale globale Formatbegrenzung zu halten? Und wenn das nicht vorgesehen sein sollte: Habe ich eine wie auch immer geartete Chance, irgendwo einige Pixel senkrecht wie waagerecht bereits in der Konfiguation abzubeißen? (Rechts und unten fünf fehlende Pixelreihen stören deutlich weniger).

[setstate]

Die Suche nach zu breit oder zu hoch kann sehr kniffelig werden. Meist ist es ein zusätzliches margin/padding in einem einzelnen (Unter)-Element, wenn die Breite/Höhe 100% sein soll.

Wenn das am PI3 Bildschirm auftritt, muss man das aber an jedem beliebigen Desktop-Browser mit der gleichen Auflösung auch nachvollziehen können. Dort könnte man dann in den Developer-Tools im Element-Inspektor nach und nach Teile entfernen, um den Auslöser einzugrenzen.

Passiert das auch schon beim Grundlayout mit Headern, ohne Inhalte?

[curt]

Die Suche nach zu breit oder zu hoch kann sehr kniffelig werden. Meist ist es ein zusätzliches margin/padding in einem einzelnen (Unter)-Element, wenn die Breite/Höhe 100% sein soll.

Den Satz habe ich leider nicht genau verstanden. Also eine fest Angabe 100% bzw. 80px je Zelle könnte helfen?

Wenn das am PI3 Bildschirm auftritt, muss man das aber an jedem beliebigen Desktop-Browser mit der gleichen Auflösung auch nachvollziehen können. Dort könnte man dann in den Developer-Tools im Element-Inspektor nach und nach Teile entfernen, um den Auslöser einzugrenzen.

Das wird vielleicht nichtmal reichen: Wenn ich recht erinnere, tritt das zudem in Abhängigkeit von konkreten Inhalt des data-get beim Widget thermostat auf.

Passiert das auch schon beim Grundlayout mit Headern, ohne Inhalte?

Das werde ich prüfen. Allerdings schaffe ich das nicht heute. Ich melde mich dann.

[curt]

@setstate
Issjaeklig ... es hat tatsächlich mit dem Header zu tun.

Ich testete mit zwei grundsätzlichen HEAD-Versionen:
1) Von index-example.html
2) Die von mir genutzte, irgendwo abgeschriebene

Bei beiden ist das Ergebnis gleich. Unter bestimmten Bedingungen zerstört der Header-Tag das Layout, es entstehen Scrollleisten. Folgend das aus (bei mir) schuldige Codefragment - allerdings muss ich dazu sagen, dass mir das Verhalten schon in einem anderen (nun vergessenen) Fall aufgefallen war.

Code Auswählen Erweitern


<li data-row="4" data-col="4" data-sizex="1" data-sizey="2">
<!--        <header>Lampe AZ</header> -->
        <div class="top-space">
            <div data-type="switch"
                 data-device="Stecker_01"
                 data-on-color="black"
                 data-off-color="#808080"
                 data-on-background-color="#CCCC00"
                 data-off-background-color="#606060"
                 class="big">
            </div>
            <div class="top-space">
                <div class="">
                    Verbrauch:
                </div>
                <div data-type="label"
                     data-device="Stecker_01"
                     data-get="power"
                     data-unit=""
                     data-limits='[0,20,50]'
                     data-colors='["#6699FF","green","firebrick"]'
                     class="big">
                </div>
            </div>
        </div>
    </li>


An der Stelle ist mein Wissen zu Ende.

Es gibt bei dem Codefragment noch eine Auffälligkeit, die aber nichts mit der eigentlichen Problematik zu tun haben muss: Der angezeigte Stromverbrauch ist ständig 0,0 W, also unabhängig davon, ob das Reading "power" einen anderen aktuellen Wert hat. Das war auch schon mal anders, da bin ich relativ sicher.

IT ist Magie, mit magischem Zaubersalz.

Soll ich Dir den Code mal komplett in einer PN schicken?