Hallo Zusammen,
ich habe für mein "Smartphone-Tablet-UI" die Vorlage "index_nav_fixed_mobil.html" von https://github.com/knowthelist/fhem-tablet-ui/tree/master/examples/mobil (https://github.com/knowthelist/fhem-tablet-ui/tree/master/examples/mobil) genommen.
Wenn ich diese mit dem Smartphone (Galaxy S6) öffne kann ich die Seite hoch und runter scrollen. Ich bin der Meinung, es liegt an dem Header. Dieser ist 55px hoch und auf die kommen dann nochmal die Displaygröße von 480. Diese 55px sind dann genau zu viel wodurch die Seite scrollbar wird auch wenn keine Widgets eingefügt sind.
Ich habe schon einiges probiert bin aber nicht der CSS-Profi.
Hoffe Ihr könnt mir da weiterhelfen :-)
Grüße Wiesel
P.S. Anbei meine index.html
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.2.0
* 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)
*
* !!!! Evaluation version - run only in a staging enviroment !!!!
*
* - create a new folder named 'tablet_eval' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
* - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
*/
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="74">
<meta name="widget_base_height" content="71">
<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="1"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta http-equiv="Cache-Control" content="no-store" />
<meta name='toast' content='0'>
<link rel="stylesheet" href="lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.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="../../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>
<title>FHEM-Tablet-UI-mobil</title>
</head>
<body>
<!-- Demo FTUI 2.1 mobil page with slideout navigation and fixed header -->
<nav id="menu">
<div data-type="link" class="default large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-dashboard"
data-color="white"
data-text-align="right"
data-load="div#content1"
data-url="#content_home.html"
data-active-color="green"
data-active-pattern="(.*index_slide.html|.*#content_home.html)">Home</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-area-chart"
data-color="white"
data-text-align="right"
data-load="div#content2"
data-url="#content_charts.html"
data-active-color="green"
data-active-pattern=".*#content_charts.html">Charts</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-lightbulb-o"
data-color="white"
data-text-align="right"
data-load="div#content3"
data-url="#content_lights.html"
data-active-color="green"
data-active-pattern=".*#content_lights.html">Lights</div>
<div data-type="link" class="nocache large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-video-camera"
data-color="white"
data-text-align="right"
data-load="div#content4"
data-url="#content_cam.html"
data-active-color="green"
data-active-pattern=".*#content_cam.html">Cam</div>
</nav>
<!-- the fixed header -->
<header id="header-nav" class="bg-lightgray fixed row">
<div data-type="slideout" class="col-1-8 big center-align notouch bottom-space"></div>
<div id="linkname" class="col-3-6 large bold center-align middle bottom-space"></div>
<div data-type="clock" data-format="H:i" class="col-1-6 right-align big black top-space"></div>
<div data-type="clock" data-format="d.n.Y" class="col-1-6 right-align small black"></div>
<!-- <div data-type="symbol" data-icon="fa-bell" data-device="dummy2" data-get-on="on.*" data-get-off="off" class="col-1-6 right-align big black"></div>
<div data-type="symbol" data-device="dummy1" data-icon="ftui-window" class="col-1-6 big warn"></div> -->
</header>
<main id="panel" class="">
<div class="page" id="content1"></div>
<div class="page" id="content2"></div>
<div class="page" id="content3"></div>
<div class="page" id="content4"></div>
</main>
</body>
</html>
Hallo Wiesel, ich hänge gerade am gleichen Problem. Habe mich bei dem Slideout an der gleichen Vorlage orientiert.
Habe mir mal die fhem-tablet-ui.css angesehen und meine, dort wird die Höhe des Menü berücksichtigt.
Zumindest soweit ich das hier nachvollziehen kann.
#header-nav ~ .page {
height: calc(100% - 55px);
}
Bin also noch auf der Suche. Aber möglicher Weise hat noch jemand einen treffenden Hinweis.
Bin eben noch auf ein interessantes Detail in den Demos gestoßen.
Im Gegensatz zu dem Demo "index_nav_fixed_mobil.html" ist in den anderen Demos der Teil von <header... ...</header> in den Teil <main... ...</main> integriert.
Ich habe meinen Header-Teil gerade mal unter den Main-Teil gehängt und schon passt die Größe. Jedoch verschwindet jetzt der obere Teil ersten Card unter dem Menü.
Sprich so:
<main id="panel" class="">
<header id="header-nav" class="bg-gray fixed row">
<div data-type="slideout" data-position="left" data-icon-color="white" class="col-1-5 big left-align notouch"></div>
<div id="linkname" class="col-4-5 bold large white middle left-align"></div>
</header>
<div class="page" id="content0"></div>
<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>
<div class="page" id="content6"></div>
<div class="page" id="content7"></div>
</main>
Habe jetzt noch folgendes probiert, um die oberste Kachel unter das Menü zu schieben.
Jetzt greift jedoch die Eigenschaft "fixed" nicht mehr.
Bin etwas ratlos... ???
<main id="panel" class="">
<header id="header-nav" class="bg-gray fixed row">
<div data-type="slideout" data-position="left" data-icon-color="white" class="col-1-5 big left-align notouch"></div>
<div id="linkname" class="col-4-5 bold large white middle left-align"></div>
</header>
<section style="height:55px"></section>
<div class="page" id="content0"></div>
<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>
<div class="page" id="content6"></div>
<div class="page" id="content7"></div>
</main>
die 55px müssen beim body abgezogen werden
<body style="height: calc(100% - 55px);">
Hallo,
jemu und setstate,
bin heute erst wieder dazu gekommen ins Forum zu schauen.
Danke euch beiden, dass Ihr euch damit beschäftigt und mir geholfen habt :-)
Noch frohes basteln am Frontend :-)
Grüße
Wiesel