Autor Thema: TabletUI wird nicht immer korrekt dargestellt  (Gelesen 267 mal)

Offline morph

  • Full Member
  • ***
  • Beiträge: 220
TabletUI wird nicht immer korrekt dargestellt
« am: 02 September 2019, 12:20:58 »
Ich habe ein Problem mit meinem TabletUI,

Jedesmal wenn ich auf "Aktualisieren" klicke, bzw. wenn ich es öffne kommen abwechselnd die richtige und dann die falsche Anzeige. Könnte mir jemand helfen?

Aus dem Code kann ich nichts falsches auslesen.

PT_menu.html

<header style="border-top-left-radius:8px;border-top-right-radius:8px;">Men&uuml;</header>

<div data-type="pagetab"
data-url="PT_index_home.html"
data-on-color="#E6FF57"
  data-off-color="#808080"
data-on-background-color="#E6FF57"
data-off-background-color="#A6BF17"
  data-icon="fa-home"
  data-background-icon="fa-circle-thin"
  class="cell" >
</div>



PT_index_home.html

<div class="gridster">
<ul>
<!-- ========= Menu ======================= -->
<li data-row="1" data-col="3" data-sizex="5" data-sizey="1" data-template="PT_inc_klima_aussen.html"
        class="halbTransparent"></li>
       
<!-- ========= Klima ====================== -->
<li data-row="2" data-col="3" data-sizex="5" data-sizey="1" data-template="PT_inc_klima_innen.html"
        class="halbTransparent"></li>
       
<!-- ============= Uhrzeit ================ -->
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2" data-template="PT_inc_uhr.html"
class="halbTransparent"></li>
       
<!-- ============= Wohnzimmer-Licht ======= -->
        <li data-row="3" data-col="1" data-sizex="2" data-sizey="2" data-template="PT_inc_index_wichtig.html"
class="halbTransparent"></li>
       
<!-- ============= Multimedia ============= -->
<li data-row="3" data-col="3" data-sizex="3" data-sizey="2" data-template="PT_inc_multimedia.html"
class="halbTransparent"></li>
       
<!-- ========= Content-Büro ============== -->
<li data-row="3" data-col="6" data-sizex="2" data-sizey="2" data-template="PT_inc_buero_licht.html"
class="halbTransparent"></li>
       
        <!-- ========= Content-Media ============== -->
        <li data-row="5" data-col="1" data-sizex="7" data-sizey="1" data-template="PT_index_schalter_unten.html"
class="halbTransparent"></li>
       
</ul>
</div>

Vielen Dank im Voraus. Patrick

Offline amenomade

  • Hero Member
  • *****
  • Beiträge: 4161
Antw:TabletUI wird nicht immer korrekt dargestellt
« Antwort #1 am: 02 September 2019, 12:29:54 »
Wichtiger wären
- die Headers in der Hauptseite (index.html?)
- Logauszüge aus dem Browser (mit F12)

Hast Du was an die .css Dateien geändert?
FHEM 5.8 Pi 3, EchoDot, CUL868+Selbstbau 1/2λ-Dipol-Antenne, USB Optolink / Vitotronic, und HM Komponenten, Rademacher Duofern Jalousien, Fritz!Dect Thermostaten

Offline morph

  • Full Member
  • ***
  • Beiträge: 220
Antw:TabletUI wird nicht immer korrekt dargestellt
« Antwort #2 am: 02 September 2019, 15:48:12 »
Gern.

<!DOCTYPE html>
<html>
<head>
<title>Castle</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="134">
<meta name="widget_base_height" content="140">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="0"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
<meta name='gridster_disable' content='1'>
  <meta name="fhemweb_url" content="http://192.168.4.48:8083/fhem">

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

<script type="text/javascript" src="/fhem/pgm2/jquery.min.js" defer></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js" defer></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js" defer></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js" defer></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js" defer></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js" defer></script>

</head>
<body>

<div class="gridster">
<ul>
       
        <!-- ============= Uhrzeit ================ -->
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2" data-template="PT_inc_uhr.html"
class="halbTransparent"></li>
       
<!-- ========= Menu ======================= -->
<li data-row="1" data-col="3" data-sizex="5" data-sizey="1" data-template="PT_inc_klima_aussen.html"
        class="halbTransparent"></li>
       
<!-- ========= Klima ====================== -->
<li data-row="2" data-col="3" data-sizex="5" data-sizey="1" data-template="PT_inc_klima_innen.html"
        class="halbTransparent"></li>
       
<!-- ============= Wohnzimmer-Licht ======= -->
        <li data-row="3" data-col="1" data-sizex="2" data-sizey="2" data-template="PT_inc_index_wichtig.html"
class="halbTransparent"></li>
       
<!-- ============= Multimedia ============= -->
<li data-row="3" data-col="3" data-sizex="3" data-sizey="2" data-template="PT_inc_multimedia.html"
class="halbTransparent"></li>
       
<!-- ========= Content-Büro ============== -->
<li data-row="3" data-col="6" data-sizex="2" data-sizey="2" data-template="PT_inc_buero_licht.html"
class="halbTransparent"></li>
       
        <!-- ========= Content-Media ============== -->
        <li data-row="5" data-col="1" data-sizex="7" data-sizey="1" data-template="PT_index_schalter_unten.html"
class="halbTransparent"></li>
       
</ul>
</div>

</body>
</html>

Ich hab nun das alles in die Index.html eingetragen, und nun taucht der "Fehler" nicht mehr auf.

Ob anderweitige Dateien verändert wurden kann ich nicht sagen, da ich das ganze mehr oder weniger "gemoppst" habe und für mich dann nur noch angepasst habe.

Gruß, Patrick

 

decade-submarginal