pagebutton - Größe der anzeige im Browser verändert sich

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

Code Auswählen

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

Code Auswählen


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

Code Auswählen

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

ekur · 17 Dezember 2017, 09:48:50

Workaround über HTML (Ausblenden Scrolleisten) funktioniert. Eine originäre Lösung wäre nach wie vor wünschenswert.

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

FHEM Forum

pagebutton - Größe der anzeige im Browser verändert sich

ekur

ekur

setstate