PageButton seiteninhalte unterhalb der Menüleiste bei Start im Portrai-Ansicht

Garbsen · 21 Januar 2017, 17:39:37

Moin

Ich habe ein für mich seltsam aussehendes Problem.
Wenn ich meine TabletUI Seite auf dem iPad 2 im Portrai (Hochkant) Modus Aufrufe, sind die Seiten Inhalte linksbündig unterhalb der Menüleiste. Das bleibt auch so, wenn ich das iPad dann drehe.
Rufe ich die Seite im Landscape (quer) Modus auf, sind die Seiteninhalte so, wie es sein sollte, bündig rechts neben der Menüleiste, und auch hier bleibt das dann so, wenn ich das iPad drehe.
Sobald ich die Seite drehe und in Safari neu laden, ändert sich das Bild.

Seltsamerweise tritt das Problem nur auf dem iPad 2 auf. Auf meinem iPad Pro funktioniert die Ansicht, unabhängig davon, wie ich es Aufrufe.

Hier meine Startseite mit dem Menü

Code Auswählen




<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 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/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="68">
    <meta name="widget_base_height" content="77">
    <meta name="widget_margin" content="1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="/fhem/tablet_eval/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet_eval/lib/fhemSVG.css" />
    <link rel="stylesheet" href="lib/material-icons.min.css" />

    <link rel="stylesheet" href="/fhem/tablet_eval/fonts/roman/style.css" />
    <link rel="stylesheet" href="/fhem/tablet_eval/fonts/material/style.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="/fhem/pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>



    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>FHEM-Tablet-UI</title>
</head>
<body>

<div class="gridster">
<ul>

<!-- ============ Home-Button ============= -->
<!-- ====================================== -->
<!--<li data-row="10" data-col="1" data-sizex="1" data-sizey="2" data-template="inc_homebutton.html"></li>-->

        <li data-row="1" data-col="1" data-sizex="1" data-sizey="10">
            <div class="cell">
				    <div data-type="pagebutton" data-url="#page_home.html" data-load="#home" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#6699FF" data-on-color="#222222" data-active-pattern=".*#page_home.*.html" data-icon="fa-home" class="top-space"></div>
				    <div data-type="pagebutton" data-url="#page_wetter.html" data-load="#wetter" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#6699FF" data-on-color="#222222" data-active-pattern=".*#page_wetter.*.html" data-icon="oa-weather_station" class="top-space"></div>
					 <div data-type="pagebutton" data-url="#page_oben.html" data-load="#oben" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#6699FF" data-on-color="#222222" data-active-pattern=".*#page_oben.*.html" data-icon="fa-bed" class="top-space"></div>
                <div data-type="pagebutton" data-url="#page_Unten.html" data-load="#Unten" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#6699FF" data-on-color="#222222" data-active-pattern=".*#page_Unten.*.html" data-icon="oa-scene_livingroom" class="top-space"></div>
                <div data-type="pagebutton" data-url="#page_hilfe.html" data-load="#hilfe" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#6699FF" data-on-color="#222222" data-active-pattern=".*#page_hilfe.*.html" data-icon="fs-rc_HELP" class="top-space"></div>
                <div data-type="pagebutton" data-url="#page_setting.html" data-load="#setting" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#6699FF" data-on-color="#222222" data-active-pattern=".*#page_setting.*.html" data-icon="fa-sliders" class="top-space"></div>
                <div data-type="pagebutton" data-url="#page_kamera.html" data-load="#kamera" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#6699FF" data-on-color="#222222" data-active-pattern=".*#page_kamera.*.html" data-icon="fs-rc_VIDEO" class="top-space"></div>					 
            </div>
        </li>
        <li data-row="1" data-col="2" data-sizex="14" data-sizey="13">
            <div class="page nocache" id="home"></div>		 
            <div class="page nocache" id="wetter"></div>	
            <div class="page nocache" id="oben"></div>					
            <div class="page nocache" id="Unten"></div>
            <div class="page" id="hilfe"></div>
            <div class="page" id="setting"></div>
			 	<div class="page" id="kamera"></div>
         </li>
 <!--
 
 
 data-active-pattern="(.*/||.*index.html||.*#page_home.*.html)"
 data-active-pattern="(.*/||.*index.html||.*#page_oben.*.html)"
 data-active-pattern="(.*/||.*index.html||.*#page_Unten.*.html)"
 -->


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

Wie man erkennen kann, habe ich mit copy paste gearbeitet, wo habe ich den Fehler eingebaut?

FHEM Forum

PageButton seiteninhalte unterhalb der Menüleiste bei Start im Portrai-Ansicht

Garbsen