FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: ekur am 14 Dezember 2017, 08:57:48

Titel: pagebutton - Größe der anzeige im Browser verändert sich
Beitrag von: ekur am 14 Dezember 2017, 08:57:48
Hallo zusammen,

nachdem die Struktur mit Pagebutton steht habe ich folgendes Problem:
Auf Seiten, in denen es ein zusätzliches Untermenü gibt erweitert sich der Anzeigebereich, so dass auf einmal in der Anzeige Scrollbalken für die Horizontale und die Vertikale vorhanden sind, da das besch.. aussieht auf einer Wandanzeige wäre ich dankbar für jeden Tipp zur Behebung des Problems. Angehängt mal zwei Bilder, einmal wie es aussieht ohne Untermenü, einmal mit Untermenü. Das Verhalten habe ich übrigens auf allen mir zur Verfügung stehenden Browsern und OS (also alles ausser Apfel)

Hier noch ein paar Codefragmente, vielleicht (oder wahrscheinlich sogar) sieht jemand etwas, dass ich nicht sehe.

Startseite
<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <meta name='gridster_disable' content='1'>
    <meta name='gridster_resize' content='0'>
    <meta name='debug' content='2'>
    <meta name="gridster_base_width" content="95">
    <meta name="gridster_base_height" content="108">
    <meta name="widget_margin" content="3">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>FHEMTABLETUI</title>
</head>

<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="5">
                <div class="row">
                    <div data-type="pagebutton" data-url="#t_content_main.html" data-load="#content1"
                        data-active-pattern="(.*/||.*#t_content_main.html)" data-icon="fa-home"
                        data-on-background-color="#6699FF" data-background-icon="fa-square"
                        class="default big"></div>
                     <div data-type="label" class="narrow large blue bold">Mööp</div></div>

--> Vier weitere, spare ich mir jetzt

                    </div>
            </li>
            <li data-row="1" data-col="2" data-sizey="5" data-sizex="9">
                <div class="page" id="content1"></div>
                <div class="page" id="content2"></div>
                <div class="page" id="content3"></div>
                <div class="page" id="content4"></div>
                <div class="page" id="content5"></div>
            </li>
        </ul>


Subseite mit Menü

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div class="page" id="content4">
    <div class="gridster">
      <ul>

            <li data-row="1" data-col="3" data-sizex="1" data-sizey="3">
                <div class="sheet">
                    <div class="row">
                    <div data-type="pagebutton" data-url="#t_syssub_1.html" data-load="#content_s1"
                        data-active-pattern="(.*/||.*#t_syssub_1.html)" data-icon="fa-sitemap"
                        data-on-background-color="#6699FF" data-background-icon="fa-square"
                        class="default big"></div>
                    <div data-type="label" class="narrow large blue">NETWORK</div></div>
                    <div class="row">
                    <div data-type="pagebutton" data-url="#t_syssub_2.html" data-load="#content_s2"
                        data-active-pattern=".*#t_syssub_2.html" data-icon="oa-it_television"
                        data-on-background-color="#6699FF" data-background-icon="fa-square"
                        class="big prefetch"></div>
                    <div data-type="label" class="narrow large blue">MONITOR</div></div>
                    <div class="row">
                    <div data-type="pagebutton" data-url="#t_syssub_3.html" data-load="#content_s3"
                        data-active-pattern=".*#t_syssub_3.html" data-icon="fa-database"
                        data-on-background-color="#6699FF" data-background-icon="fa-square"
                        class="big prefetch"></div>
                    <div data-type="label" class="narrow large blue">FHEM</div></div>
                </div>
            </li>
            <li data-row="1" data-col="2" data-sizey="5" data-sizex="7">
                <div class="page" id="content_s1"></div>
                <div class="page" id="content_s2"></div>
                <div class="page" id="content_s3"></div>
            </li>

    </ul>
    </div>
</body>
</html>


SubsubSeite
<html>
<title>FHEM</title>
<head>
</head>
<body>
  <div class="page" id="content_s3">
    <div class="gridster">
      <ul>

        <li data-row="1" data-col="1" data-sizex="5" data-sizey="1">
        <header><div data-type="label" style="font-size:14px">FHEMRASP</div></header><br/>
        <div    class="newline"></div>
        <div    class="inline">Installiert:&emsp;FHEM-Version</div>
        <div    class="inline" data-type="label" data-device="global" data-get="version"
                data-substitution="s/fhem\.pl\://g"></div>
        <div    class="inline">FTUI-Version</div>
        <div    class="inline" data-bind="ftui.version"></div>
        <div    class="newline"></div>
        <div    class="inline">Aktualisierung:&emsp;FHEM-Version</div>
        <div    class="inline" data-type="label" data-device="httpmod_fhemcontrols" data-get="revision"
                data-post-text=" /"></div>
        <div    class="inline" data-type="label" data-device="httpmod_fhemcontrols" data-get="date"></div>
        <div    class="inline">FTUI-Version</div>
        <div    class="inline" data-type="label" data-device="httpmod_ftu>
        </div>


      </ul>
    </div>
   </div>
</body>
</html>


Eine Seite ohne das Untermenü ist wie eine Subsubseite aufgebaut, eben nur dann direkt vom Haupmenü aufgerufen.
Titel: Antw:pagebutton - Größe der anzeige im Browser verändert sich
Beitrag von: ekur am 17 Dezember 2017, 09:48:50
Workaround über HTML (Ausblenden Scrolleisten) funktioniert. Eine originäre Lösung wäre nach wie vor wünschenswert.
Titel: Antw:pagebutton - Größe der anzeige im Browser verändert sich
Beitrag von: setstate am 17 Dezember 2017, 13:19:24
Das war ein Bug in der Gridster in Gridster Sonderbehandlung, die bei Gridster in Gridster in Gridster nicht funktionierte. Update ist oben