Hauptmenü

Update 2.7.2.

Begonnen von setstate, 01 September 2018, 00:24:54

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten 1 ... 6 7 8
Benutzer-Aktionen

StephanFHEM

#105
20 April 2019, 17:34:42
Für Vollbild-Modus an Wandtablets kann ich dir Fully empfehlen. Das hat zusätzlich viele sinnvolle Funktionen und kann auch kostenlos genutzt werde (wenn man Plus-Funktionen wie Remote Admin oder Motiondetection aktiviert, hat man im Bild ein kaum störendes Wasserzeichen).

pjakobs

#106
20 April 2019, 17:55:43
Zitat von: StephanFHEM am 20 April 2019, 17:34:42
Für Vollbild-Modus an Wandtablets kann ich dir Fully empfehlen. Das hat zusätzlich viele sinnvolle Funktionen und kann auch kostenlos genutzt werde (wenn man Plus-Funktionen wie Remote Admin oder Motiondetection aktiviert, hat man im Bild ein kaum störendes Wasserzeichen).
Hab ich schon getestet, ist leider auch Chromium basiert, render meine Seite also genau wie Chrome


Gesendet von meinem HTC U11 mit Tapatalk

StephanFHEM

#107
20 April 2019, 18:41:01
Ich habe bei mir keinen Unterschied zwischen Firefox und Chrome. Vielleicht kopierst du mal einen Auszug aus deinem Header/index.html

pjakobs

#108
21 April 2019, 12:02:01
Zitat von: StephanFHEM am 20 April 2019, 18:41:01
Ich habe bei mir keinen Unterschied zwischen Firefox und Chrome. Vielleicht kopierst du mal einen Auszug aus deinem Header/index.html

Code Auswählen

<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.4.4
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 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 tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<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="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="lib/material-icons.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-blue-ui.css" />
<!-- <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" /> -->
<!-- <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />-->
<!-- <link rel="stylesheet" href="css/fhem-mobil-ui.css" /> -->
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<link rel="stylesheet" href="css/user.css" />

<title>Home-Tablet-UI</title>
</head>
<body>
<main id="content1">
<div class="vbox items-top">

<!-- Lightscenes -->
<!-- <div class="card lift" style="height:200px">-->

<div class="hbox bg-orange items-top grow-0" style="height:12%">
<div class="card">
<div class="hbox">
<div class="card" >
<header>Wohnzimmer/Büro</header>
<div data-type="select" data-device="LS_Wohnzimmer" data-set="scene" data-list="scenes" data-items='["Arbeit","Besuch","Lesen","Ruhe","TV","an","off","voll","auto"]' data-alias='["Arbeit","Besuch","Lesen","Ruhe","TV","An","Aus","Voll","Auto"]'  ></div>
</div>
<div class="card" >
<header>Terasse</header>
<div data-type="select" data-device="LS_Terasse" data-set="scene" data-list="scenes" data-items='["off","10", "20","30","40","50","60","70","80","90","on","voll","auto","Party","kuehl","neutral","warm"]' data-alias='["Aus","10","20","30","40","50","60","70","80","90","An","Voll","Auto","Party","Kühl","Neutral","Warm"]' ></div>
</div>
<div class="card" >
<header>Küche</header>
<div data-type="select" data-device="LS_Kueche" data-set="scene" data-list="scenes" data-items='["on","off","voll","auto"]' data-alias='["An","Aus","Voll","Auto"]' ></div>
</div>
<div class="card" >
<header>Flur</header>
<div data-type="select" data-device="LS_Flur" data-set="scene" data-list="scenes" data-items='["on","off","night","auto"]' data-alias='["An","Aus","Nacht","Auto"]' ></div>
</div>
<div class="card" >
<header>Schlafzimmer</header>
<div data-type="select" data-device="LS_Schlafzimmer" data-set="scene" data-list="scenes" data-items='["on","off","night","auto"]' data-alias='["An","Aus","Nacht","Auto"]'></div>
</div>
</div>
</div>
</div>
<div class="hbox bg-green" >
<div class="vbox">
<!-- second horizontal box -->
<div class="hbox bg-blue" style="height:50%" >
<!-- Homestatus -->
<div class="card lift phone-width" style="height:98%">
<header>Homestatus</header>
<div data-type='homestatus' data-device='Homestatus' data-get='location'
data-get-on='["home","arrival","bed","underway","wayhome"]'
data-alias='["Daheim","Angekomen","Nacht","Unterwegs","Heimweg"]'
data-icons='["fa-home","fa-home","fa-bed","fa-suitcase","fa-car"]'
data-set-on='["home", "arrival","bed","underway","wayhome"]'>
</div>
</div>
<!-- Abfallkalender -->
<div class="card lift phone-width" style="height:98%">
<header>Abfallkalender</header>
<div class="vbox">
<div class="hbox">
<div class="card">
<header>Biotonne</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Bioabfall14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]'  data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
<div class="card">
<header>Gelber Sack</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="GelberSack14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle"  class="bigger inline" > </div>
</div>
</div>
<div class="hbox">
<div class="card">
<header>Papiertonne</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Papiertonnemonatlich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]'  data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
<div class="card">
<header>Restabfall</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Restabfall40L-240L14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
</div>
</div>
</div>

</div>
das dürfte alles Relevante sein.
Wie gesagt: was mich wundert ist, dass Firefox die erste hbox korrekt rendert, chrome deren Höhe aber ignoriert bzw. sie überschreibt.

pj

yersinia

#109
23 April 2019, 15:36:50
@pjakobs, gleiches Problem auch wenn das Inline-CSS korrekt (Semikolon nach der height Angabe) gesetzt wird?
<div class="hbox bg-orange items-top grow-0" style="height:12%;">
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

pjakobs

#110
23 April 2019, 15:48:54
Zitat von: yersinia am 23 April 2019, 15:36:50
@pjakobs, gleiches Problem auch wenn das Inline-CSS korrekt (Semikolon nach der height Angabe) gesetzt wird?
<div class="hbox bg-orange items-top grow-0" style="height:12%;">
hmm... hab ich gerade mal getestet, leider keine Veränderung.

pj

yersinia

#111
24 April 2019, 09:36:54
Hab mir deinen Code gerade genauer angeschaut und vermute, neben den nicht abschließenden Inline CSS (fehlende Semikolon), ungenaue height-Angaben.

Die erste hbox hat eine height von 12%, die zweite (Zeile 79: <div class="hbox bg-green" >) hat keine height Angabe. MWn beziehen sich die Höhenangaben hier auf das umschließende <div> (Zeile 48).

In Zeile 82 gibt es eine height-Angabe (50%), die sich aber auf den div-Container in Zeile 80 bezieht. In diesen 50% (hbox!) kommt der Homestatus mit 98% (Zeile 84) und der Abfallkalender mit 98% (Zeile 94 Höhe in Bezug auf die 50% übereinander (!) - du überschreitest quasi die maximale Höhe von 100%.

Ich würde alle Höhen rausnehmen und neu anfangen und es sukzessive setzen. Bei Prozentangaben sollte die Gesamtsumme 100% nicht überschreiten.
Code Auswählen
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.4.4
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 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 tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<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="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="lib/material-icons.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-blue-ui.css" />
<!-- <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" /> -->
<!-- <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />-->
<!-- <link rel="stylesheet" href="css/fhem-mobil-ui.css" /> -->
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<link rel="stylesheet" href="css/user.css" />

<title>Home-Tablet-UI</title>
</head>
<body>
<main id="content1">
<div class="vbox items-top">

<!-- Lightscenes -->
<!-- <div class="card lift" style="height:200px">-->

<div class="hbox bg-orange items-top grow-0" style="height:12%;">
<div class="card">
<div class="hbox">
<div class="card" >
<header>Wohnzimmer/Büro</header>
<div data-type="select" data-device="LS_Wohnzimmer" data-set="scene" data-list="scenes" data-items='["Arbeit","Besuch","Lesen","Ruhe","TV","an","off","voll","auto"]' data-alias='["Arbeit","Besuch","Lesen","Ruhe","TV","An","Aus","Voll","Auto"]'  ></div>
</div>
<div class="card" >
<header>Terasse</header>
<div data-type="select" data-device="LS_Terasse" data-set="scene" data-list="scenes" data-items='["off","10", "20","30","40","50","60","70","80","90","on","voll","auto","Party","kuehl","neutral","warm"]' data-alias='["Aus","10","20","30","40","50","60","70","80","90","An","Voll","Auto","Party","Kühl","Neutral","Warm"]' ></div>
</div>
<div class="card" >
<header>Küche</header>
<div data-type="select" data-device="LS_Kueche" data-set="scene" data-list="scenes" data-items='["on","off","voll","auto"]' data-alias='["An","Aus","Voll","Auto"]' ></div>
</div>
<div class="card" >
<header>Flur</header>
<div data-type="select" data-device="LS_Flur" data-set="scene" data-list="scenes" data-items='["on","off","night","auto"]' data-alias='["An","Aus","Nacht","Auto"]' ></div>
</div>
<div class="card" >
<header>Schlafzimmer</header>
<div data-type="select" data-device="LS_Schlafzimmer" data-set="scene" data-list="scenes" data-items='["on","off","night","auto"]' data-alias='["An","Aus","Nacht","Auto"]'></div>
</div>
</div>
</div>
</div>
<div class="hbox bg-green" style="height:98%;"> <!-- HIER -->
<div class="vbox">
<!-- second horizontal box -->
<div class="hbox bg-blue" style="height:50%;" >
<!-- Homestatus -->
<div class="card lift phone-width" style="height:98%;"> <!-- HIER -->
<header>Homestatus</header>
<div data-type='homestatus' data-device='Homestatus' data-get='location'
data-get-on='["home","arrival","bed","underway","wayhome"]'
data-alias='["Daheim","Angekomen","Nacht","Unterwegs","Heimweg"]'
data-icons='["fa-home","fa-home","fa-bed","fa-suitcase","fa-car"]'
data-set-on='["home", "arrival","bed","underway","wayhome"]'>
</div>
</div>
<!-- Abfallkalender -->
<div class="card lift phone-width" style="height:98%;"> <!-- HIER -->
<header>Abfallkalender</header>
<div class="vbox">
<div class="hbox">
<div class="card">
<header>Biotonne</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Bioabfall14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]'  data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
<div class="card">
<header>Gelber Sack</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="GelberSack14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle"  class="bigger inline" > </div>
</div>
</div>
<div class="hbox">
<div class="card">
<header>Papiertonne</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Papiertonnemonatlich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]'  data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
<div class="card">
<header>Restabfall</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Restabfall40L-240L14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
</div>
</div>
</div>

</div>
</div> <!-- FEHLTE / vbox -->
</div> <!-- FEHLTE / hbox -->
</div> <!-- FEHLTE / vbox -->
Weiterhin fehlten drei Abschließende </div> am Ende aber dies kommt wahrscheinlich vom kopieren.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

pjakobs

#112
24 April 2019, 17:09:11
hmmm...

ich hatte mal eine ganze Version ohne Höhenangaben.
Aber mal ne grundsätzliche Frage:
Bezieht sich die Prozentangabe auf die Gesamthöhe oder auf die Höhe des nächsthöheren Containers? Von letzterem bin ich ausgegangen. Die Idee war: 12% des Fensters der ersten HBOX, die restlichen 78% teile ich dann auf, daher die 98% darunter (eine VBOX die die gesamte verbliebene Höhe, also etwas unter 78% Prozent bekommt) und darin jeweils 50% für die eingebauten VBOXen.

css war mir immer suspekt ;-)

pj

yersinia

#113
24 April 2019, 17:25:25
Zitat von: pjakobs am 24 April 2019, 17:09:11Aber mal ne grundsätzliche Frage:
Bezieht sich die Prozentangabe auf die Gesamthöhe oder auf die Höhe des nächsthöheren Containers? Von letzterem bin ich ausgegangen. Die Idee war: 12% des Fensters der ersten HBOX, die restlichen 78% teile ich dann auf, daher die 98% darunter (eine VBOX die die gesamte verbliebene Höhe, also etwas unter 78% Prozent bekommt) und darin jeweils 50% für die eingebauten VBOXen
Deine Annahme ist korrekt: das height bezieht sich immer auf das Elternelement (jedenfalls verstehe ich das hier so). Wichtig ist aber auch diese Aussage:
ZitatThe height of an element does not include padding, borders, or margins!

Die erste hbox hat 12% Höhe, dann kann der Rest nur noch maximal 88% haben, was hier falsch wäre:
Code Auswählen
<div class="hbox bg-green" style="height:98%;"> <!-- HIER -->
Da müssten doch 88% stehen (100 - 12 = 88), möglicherweise reicht schon ein height:auto; um den Restplatz zu konsumieren.

Darunterliegende div Container haben dann mit <div class="hbox bg-blue" style="height:50%;" > 50% der Höhe des 88% Restes - hier beziehen sich die height:50% auf die height:88%; der umschließenden hbox (also des Elternelements) - dies entspricht dann 44% der Gesamtbildschirmhöhe.

Möglicherweise klappt es besser, alle height-Angaben auf auto zu setzen und dann sukzessive im Baum von oben die Höhen verändern.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

pjakobs

#114
24 April 2019, 17:50:04
puh, jetzt hab ich alles ordentlich durcheinander gewürfelt :o
hier mal die gesamte Seite "neu" - ich hab die hbox ganz oben rausgeworfen und die "card" darin hochgezogen. Jetzt hat die das gleiche Problem. Sigh.
Es sieht so aus, als ob Chrome die erste flexbox einfach nicht in der definierten Höhe anzeigen möchte - Firefox aber schon.

pj

Code Auswählen
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.4.4
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 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 tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<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="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="lib/material-icons.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-blue-ui.css" />
<!-- <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" /> -->
<!-- <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />-->
<!-- <link rel="stylesheet" href="css/fhem-mobil-ui.css" /> -->
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<link rel="stylesheet" href="css/user.css" />

<title>Home-Tablet-UI</title>
</head>
<body>
<main id="content1">
<div class="vbox items-top">

<!-- Lightscenes -->
<!-- <div class="card lift" style="height:200px">-->

<!--<div class="hbox"-->
<div class="card bg-orange" style="height:auto;"">
<div class="hbox">
<div class="card" >
<header>Wohnzimmer/Büro</header>
<div data-type="select" data-device="LS_Wohnzimmer" data-set="scene" data-list="scenes" data-items='["Arbeit","Besuch","Lesen","Ruhe","TV","an","off","voll","auto"]' data-alias='["Arbeit","Besuch","Lesen","Ruhe","TV","An","Aus","Voll","Auto"]'  ></div>
</div>
<div class="card" >
<header>Terasse</header>
<div data-type="select" data-device="LS_Terasse" data-set="scene" data-list="scenes" data-items='["off","10", "20","30","40","50","60","70","80","90","on","voll","auto","Party","kuehl","neutral","warm"]' data-alias='["Aus","10","20","30","40","50","60","70","80","90","An","Voll","Auto","Party","Kühl","Neutral","Warm"]' ></div>
</div>
<div class="card" >
<header>Küche</header>
<div data-type="select" data-device="LS_Kueche" data-set="scene" data-list="scenes" data-items='["on","off","voll","auto"]' data-alias='["An","Aus","Voll","Auto"]' ></div>
</div>
<div class="card" >
<header>Flur</header>
<div data-type="select" data-device="LS_Flur" data-set="scene" data-list="scenes" data-items='["on","off","night","auto"]' data-alias='["An","Aus","Nacht","Auto"]' ></div>
</div>
<div class="card" >
<header>Schlafzimmer</header>
<div data-type="select" data-device="LS_Schlafzimmer" data-set="scene" data-list="scenes" data-items='["on","off","night","auto"]' data-alias='["An","Aus","Nacht","Auto"]'></div>
</div>
</div>
</div>
<!--</div>-->
<div class="hbox bg-green"  >
<div class="vbox">
<!-- second horizontal box -->
<div class="hbox bg-blue">
<!-- Homestatus -->
<div class="card lift phone-width">
<header>Homestatus</header>
<div data-type='homestatus' data-device='Homestatus' data-get='location'
data-get-on='["home","arrival","bed","underway","wayhome"]'
data-alias='["Daheim","Angekomen","Nacht","Unterwegs","Heimweg"]'
data-icons='["fa-home","fa-home","fa-bed","fa-suitcase","fa-car"]'
data-set-on='["home", "arrival","bed","underway","wayhome"]'>
</div>
</div>
<!-- Abfallkalender -->
<div class="card lift phone-width">
<header>Abfallkalender</header>
<div class="vbox">
<div class="hbox">
<div class="card">
<header>Biotonne</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Bioabfall14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]'  data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
<div class="card">
<header>Gelber Sack</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="GelberSack14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle"  class="bigger inline" > </div>
</div>
</div>
<div class="hbox">
<div class="card">
<header>Papiertonne</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Papiertonnemonatlich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]'  data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
<div class="card">
<header>Restabfall</header>
<div class="cell" data-type="symbol" data-device="Abfall" data-get="Restabfall40L-240L14-taeglich_days" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' data-background-icon="fa-circle" class="bigger inline" > </div>
</div>
</div>
</div>
</div>

</div>
   <!--
       <header>TV</header>
            <div data-type="circlemenu" class="cell circlemeu">
                <ul class="menu">
                    <li><div data-type="symbol" data-icon="fa-television"></div></li>
                    <li><div data-type="push" data-icon="fa-power-off" data-url-xhr="http://192.168.29.47/control?cmd=irsend,NEC,40bf7f80,32"></div></li>
                    <li><div data-type="push" data-icon="fa-power-off" data-url-xhr="http://192.168.29.47/control?cmd=irsend,NEC,40bf7f80,32">osmc</div></li>
                    <li><div data-type="push" data-icon="fa-power-off" data-url-xhr="http://192.168.29.47/control?cmd=irsend,NEC,40bf7f80,32">fire</div></li>
                    <li><div data-type="push" data-icon="fa-power-off" data-url-xhr="http://192.168.29.47/control?cmd=irsend,NEC,40bf7f80,32">dvd</div></li>
                </ul>
            </div>
   -->
<div class='hbox bg-red items-top'>
<!-- alarm state -->
<div class="card lift" style="width:140px">
<header>Alarmstatus</header>
<div class="vbox flex-start" style="width:120px" >
<div class="hbox flex-start">
<div data-type="push"
data-device="Homestatus"
data-icon="fa-angle-up"
data-background-icon="fa-square-o"
data-get="modeAlarm"
data-on-background-color="SaddleBrown"
data-get-on="disarm"
data-get-off="!disarm">
</div>
<div>Disarm</div>
</div>
<div class="hbox">
<div data-type="push"
data-device="Homestatus"
              data-icon="fa-angle-up"
data-background-icon="fa-square-o"
data-get="modeAlarm"
data-on-background-color="SaddleBrown"
            data-get-on="confirm"
data-get-off="!confirm">
</div>
<div>Confirm</div>
</div>
<div class="hbox">
<div data-type="push"
data-device="Homestatus"
            data-icon="fa-angle-up"
data-background-icon="fa-square-o"
data-get="modeAlarm"
data-on-background-color="SaddleBrown"
data-get-on="armaway"
data-get-off="!armaway">
</div>
<div>Armaway</div>
</div>
<div class="hbox">
<div data-type="push"
data-device="Homestatus"
data-icon="fa-angle-up"
data-background-icon="fa-square-o"
data-get="modeAlarm"
data-on-background-color="SaddleBrown"
data-get-on="armnight"
data-get-off="!armnight">
</div>
<div>armnight</div>
</div>
<div class="hbox">
<div data-type="push"
data-device="Homestatus"
data-icon="fa-angle-up"
data-background-icon="fa-square-o"
data-get="modeAlarm"
data-on-background-color="SaddleBrown"
data-get-on="armnhome"
data-get-off="!armnhome">
</div>
<div>Armhome</div>
</div>
        </div>
</div>

<!-- Schalter innen -->
<div class='card lift' >
<header>innen</header>
<div class='hbox'>
<div class='vbox'>
<!-- Kaffemaschine -->
<div class="card lift">
<header>Kaffemaschine</header>
<div data-type="switch"
data-device="SW_Kaffee"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050">
</div>
</div>
<!-- Lüfter Büro -->
<div class="card lift">
<header>Lüfter Büro</header>
<div data-type="switch"
data-device="SW_FAN"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050">
</div>
</div>
</div>
<div class='vbox'>
<div class="card lift">
<!-- Lötstation -->
<header>Lötstation</header>
<div data-type="switch"
data-device="SW_Loetstation"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050">
</div>
</div>
<div class="card lift">
<!-- <div class="vbox"> -->
<!-- Gäste WLAN -->
<header>Gäste WLAN</header>
<div data-type="switch"
data-device="FritzBox"
data-get-on="on"
data-get-off="off"
data-set-on="on"
data-set-off="off"
data-get="box_guestWlan"
data-set="guestWlan"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050">
</div>
<!-- <div class="level horizontal mini" data-device="FritzBox" data-get="box_guestWlanRemain" ></div>-->
<!-- </div> -->
</div>
</div>
</div>
</div>

<!-- Schalter außen -->
<div class="card lift" >
<header>außen</header>
<div class='hbox'>
<div class='vbox'>
<div class='card'>
<header>Carport 1</header>
<div data-type="switch"
data-device="ST_Carport_1"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-color="#505050">
</div>
</div>
<div class='card'>
<header>Carport 2</header>
<div data-type="switch"
data-device="ST_Carport_2"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-color="#505050">
</div>
</div>
</div>
<div class='vbox'>
<div class='card'>
<header>Carport 3</header>
<div data-type="switch"
data-device="ST_Carport_3"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-color="#505050">
</div>
</div>
<div class='card'>
<header>Garten</header>
<div data-type="switch"
data-device="ST_Garten"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-color="#505050">
</div>
</div>
</div>
<div class='vbox'>
<div class='card'>
<header>Lampions</header>
<div data-type="switch"
data-device="SW_Lichterkette"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-color="#505050">
</div>
</div>
<!-- Markise -->
<div class="card">
<header>Markise</header>
<div data-type="circlemenu" class="cell circlemenu">
     <ul class="menu">
       <li><div data-type="symbol" data-device="Markise_Te" data-icon="oa-fts_sunblind" data-get="state"></div></li>
       <li><div data-type="push" data-device="Markise_Te" data-icon="" data-set="pos" data-get="pos" data-get-on="10" data-set-on="0">0</div></li>
       <li><div data-type="push" data-device="Markise_Te" data-icon="" data-set="pos" data-get="pos" data-get-on="10" data-set-on="10">10</div></li>
       <li><div data-type="push" data-device="Markise_Te" data-icon="" data-set="pos" data-get="pos" data-get-on="25" data-set-on="25">25</div></li>
       <li><div data-type="push" data-device="Markise_Te" data-icon="" data-set="pos" data-get="pos" data-get-on="50" data-set-on="50">50</div></li>
       <li><div data-type="push" data-device="Markise_Te" data-icon="" data-set="pos" data-get="pos" data-get-on="75" data-set-on="75">75</div></li>
       <li><div data-type="push" data-device="Markise_Te" data-icon="" data-set="pos" data-get="pos" data-get-on="100" data-set-on="100">100</div></li>
     </ul>
     </div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- AV Stuff -->
<div class="card lift phone-width" >
<header>Stereoanlage</header>
<div class="vbox">
<!-- on / off für Geräte -->
<div class="hbox" >
<div class="card" >
<header>Verstärker</header>
<div class="vbox">
<div class="hbox">
<div data-type="switch"
data-device="SW_Amp"
data-get-on="ON"
data-get-off="!ON"
data-set-on="ON"
data-set-off="OFF"
data-color="#505050">
</div>
<div data-type="push" data-icon="fa-volume-off" data-url-xhr="http://192.168.29.27/control?cmd=irsend,SONY,281,12"></div>
</div>
<div class="hbox">
<div data-type="push" data-icon="fa-volume-down" data-url-xhr="http://192.168.29.27/control?cmd=irsend,SONY,c81,12"></div>
<div data-type="push" data-icon="fa-volume-up" data-url-xhr="http://192.168.29.27/control?cmd=irsend,SONY,481,12"></div>
</div>

<div data-type="select" data-device="Verstaerker" data-items='["CD","OSMC","TV"]' class="cell wide"></div>
</div>

</div>
<div class="vbox" >
<div class="card">
<header>CD Player</header>
<div data-type="switch"
data-device="SW_CD"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050"/>
</div>
<div class="card">
<header>DVD Player</header>
<div data-type="switch"
data-device="SW_DVD"
data-get-on="ON"
data-get-off="OFF"
data-set-on="ON"
data-set-off="OFF"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050"/>
</div>
</div>
</div>
<!-- kodi -->
<div class="card" >
<header>
<div class="inline" data-type="label" data-device="OSMC" data-get="label"></div>
(
<div class="inline" data-type="label" data-device="OSMC" data-get="playStatus"></div>
<!--<div class="inline" "level" data-device="OSMC" data-get="utime" data-max="utotaltime"></div>-->
<div class="inline" data-type="label" data-device="OSMC" data-get="time"></div>
)
</header>
<div class="hbox">
<div data-type="image" data-device="OSMC" data-get="http_thumbnail" style="width:200px;display:block;margin-left:auto;margin-right:auto"></div>
<!-- minimal kodi kontrols -->
<div class="vbox">
<div data-type="push" data-device="OSMC" data-get="playStatus" data-get-on="playing" data-get-off="paused|stopped" data-set-on="play all"  data-icon="fa-play"></div>
<div data-type="push" data-device="OSMC" data-get="playStatus" data-get-on="paused"  data-get-off="playing|stopped"  data-set-on="pause all" data-icon="fa-pause"></div>
<div data-type="push" data-device="OSMC" data-get="playStatus" data-get-on="stopped" data-get-off="playing|paused" data-set-on="stop all"  data-icon="fa-stop"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>


<!--
<header>Ambilight</header>
<div data-type="switch"
data-device="ambilight"
      data-get="last_type"
data-get-on="((?!off))"
data-get-off="off"
data-set-on="effect Cinema_brighten_lights 30 750"
data-set-off="off"
data-icon-off="fa-volume-off"
data-icon-on="fa-volume-up"
data-color="#505050">
</div>
-->

<!--
<header>Terasse - Steckdose</header>
<div data-type="switch"
data-device="SW_Aussen"
data-get-on="on"
data-get-off="off"
data-set-on="on"
data-set-off="off"
data-color="#505050">
</div>
-->

    <!--
<header>Terasse - Webcam</header>
<div data-type="switch"
data-device="SW_Webcam"
data-get-on="on"
data-get-off="off"
data-set-on="on"
data-set-off="off"
data-color="#505050">
</div>
-->

<!--
    <header>Terasse - Licht</header>
<div data-type="switch"
data-device="LED_Te"
      data-get="state"
    data-get-on="!rgb 000000"
data-get-off="rgb 000000"
data-set-on="hsv 0,0,100"
      data-set-off="hsv 0,0,0"
data-color="#505050">
</div>
-->
<!--
    <li data-row="4" data-col="2" data-sizex="2" data-sizey="2">
        <header>LIGHTS</header>
        <div class="container round bg-gray">
            <div class="hbox narrow inline row-40">
                <div data-type="switch" data-device='LED_Sc' data-on-background-color="LED_Sc:rgb" data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="small left-align"> </div>
                <div class="col-60 center-align" >Schreibtisch</div>
                <div data-type="symbol" id="ST_Sc1" data-device='LED_Sc' data-get="" data-off-color="LED_Sc:rgb" data-off-background-color="LED_Sc:rgb" data-icon="fa-ellipsis-h" data-background-icon="fa-circle-thin" class="small right-align"> </div>
                <div class="" data-type="popup" data-height="320px" data-width="320px" data-mode="animate" data-starter="#ST_Sc1" class="col-1-6">
                    <div class="dialog">
                        <header>RBG COLOR</header>
                        <div data-type="colorwheel" data-device='LED_Sc' data-get="rgb" data-set="rgb" class="big roundIndicator"> </div>
                    </div>
                </div>
            </div>
            <div class="hbox narrow inline row-40">
                <div data-type="switch" data-device='LED_Bu' data-on-background-color="LED_Bu:rgb" data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="small left-align"> </div>
                <div class="col-60 center-align">Büro</div>
                <div data-type="symbol" id="ST_Bu" data-device='LED_Bu' data-get="" data-off-color="LED_Bu:rgb" data-off-background-color="LED_Bu:rgb" data-icon="fa-ellipsis-h" data-background-icon="fa-circle-thin" class="small right-align"> </div>
                <div class="" data-type="popup" data-height="320px" data-width="320px" data-mode="animate" data-starter="#ST_Bu">
                    <div class="dialog">
                        <header>RBG COLOR</header>
                        <div data-type="colorwheel" data-device='LED_Bu' data-get="rgb" data-set="rgb" class="big roundIndicator"> </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container round bg-gray">
            <div class="hbox narrow inline row-40">
                <div data-type="switch" data-device='LED_Wo' data-on-background-color="LED_Wo:rgb" data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="small"> </div>
                <div class="col-60 center-align">Wohnzimmer Couch</div>
                <div data-type="symbol" id="ST_Wo" data-device='LED_Wo' data-get="" data-off-color="LED_Wo:rgb" data-off-background-color="LED_Wo:rgb" data-icon="fa-ellipsis-h" data-background-icon="fa-circle-thin" class="small"> </div>

                <div class="" data-type="popup" data-height="320px" data-width="320px" data-mode="animate" data-starter="#ST_Wo" >
                    <div class="dialog">
                        <header>RBG COLOR</header>
                        <div data-type="colorwheel" data-device='LED_Wo' data-get="rgb" data-set="rgb" class="big roundIndicator"> </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row container round bg-gray">
            <div class="hbox narrow inline row-40">
                <div data-type="switch" data-device='LED_Tr' data-on-background-color="LED_Tr:rgb" data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="small left-align">
                </div>
                <div class="col-60 center-align">
                    Treppe
                </div>
                <div data-type="symbol" id="ST_Tr" data-device='LED_Tr' data-get="" data-off-color="LED_Tr:rgb" data-off-background-color="LED_Tr:rgb" data-icon="fa-ellipsis-h" data-background-icon="fa-circle-thin" class="small right-align">
                </div>

                <div class="" data-type="popup" data-height="320px" data-width="320px" data-mode="animate" data-starter="#ST_Tr">
                    <div class="dialog">
                        <header>
                            RBG COLOR
                        </header>
                        <div data-type="colorwheel" data-device='LED_Tr' data-get="rgb" data-set="rgb" class="big roundIndicator">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row container round bg-gray">
            <div class="hbox narrow inline row-30">
                <div data-type="switch" data-device='LED_Ku' data-on-background-color="LED_Ku:rgb" data-get-on="dim.*|on" data-set-on="on" data-icon="fa-lightbulb-o" class="small left-align"> </div>
                <div class="col-60 center-align">Küche</div>
                <div data-type="symbol" id="ST_Ku" data-device='LED_Ku' data-get="" data-off-color="LED_Ku:rgb" data-off-background-color="LED_Ku:rgb" data-icon="fa-ellipsis-h" data-background-icon="fa-circle-thin" class="small right-align"> </div>

                <div class="" data-type="popup" data-height="320px" data-width="320px" data-mode="animate" data-starter="#ST_Ku">
                    <div class="dialog">
                        <header>RBG COLOR</header>
                        <div data-type="colorwheel" data-device='LED_Ku' data-get="rgb" data-set="rgb" class="big roundIndicator"> </div>
                    </div>
                </div>
            </div>
        </div>

    </li>
-->

yersinia

#115
24 April 2019, 17:57:47
Versuche es doch erstmal so:
Code Auswählen
<div class="card bg-orange" style="height:12%;">
anstelle von
Code Auswählen
<div class="card bg-orange" style="height:auto;"">
(doppeltes Hochkommata am Ende ist sowieso falsch)

Dann hast du die Höhe dieses einen Containers (und der Kind-Elemente) definiert.

Dann bei der nächsten hbox die height:auto hinzufügen damit du die Resthöhe (durch den Browser berechnet) ausnutzt:
Code Auswählen
<div class="hbox bg-green" style="height:auto;">
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

pjakobs

#116
24 April 2019, 18:30:09
doppelte Anführungszeichen. Wie oft mich Editoren, die automatisch öffnende und schließende Anführungszeichen setzen schon genarrt haben, ich kann es nicht mehr zählen.

Ich hab jetzt mal folgendes versucht:
Code Auswählen

<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.4.4
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 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 tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<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="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="lib/material-icons.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-blue-ui.css" />
<!-- <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" /> -->
<!-- <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />-->
<!-- <link rel="stylesheet" href="css/fhem-mobil-ui.css" /> -->
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<link rel="stylesheet" href="css/user.css" />

<title>Home-Tablet-UI</title>
</head>
  <body>
  <main id="content5">
  <div class="vbox items-top">
<!-- outer vbox -->
<div class="hbox items-top bg-orange" style="height:12%;">
<!-- slim top box -->
</div>
<div class="hbox items-top" style="height:auto;">
<!-- large rest -->
<div class="vbox items-top" style="widht:60%;">
<!-- left side -->
<div class="card bg-blue" style="height:50%;">
<!-- left side top -->
</div>
<div class="card bg-red" style="height:auto;">
<!-- left side bottom -->
</div>
</div>
<div class="card bg-green" style="height:auto;">
<!-- right side -->
</div>
</div>
    </div>
  </main>
</body>
</html>


was gut ist: das wird von Chrome und FF gleich gerendert.
was schlecht ist: es entspricht in beiden Fällen nicht dem, was ich erwartet hätte.
so wirklich falsch kann doch da jetzt nix mehr sein, oder?

pjakobs

#117
24 April 2019, 18:38:27
hier mal mit den berechneten Werten.
Seltsam, dass die 12% zwar angezeigt werden, aber tatsächlich werden 50% des Parentcontainers berechnet.

yersinia

#118
25 April 2019, 10:15:45
Ja, CSS ist manchmal grausam. -.-
Für den FF hängt die Berechnung in Meinem Verständnis von der definierten Höhe des Elternelements ab:
ZitatProzentwerte
Der Prozentwert wird unter Berücksichtigung der Höhe des die generierte Box beinhaltenden Blocks berechnet. Falls die Höhe des beinhaltenden Blocks nicht explizit angegeben wurde (d. h. sie hängt von der Höhe des Inhalts ab) und dieses Element nicht absolut positioniert ist, ist der berechnete Wert auto. Eine prozentuale Höhe beim Wurzelelement ist relativ zum ursprünglichen beinhaltenden Block.

Ich habe das mal versucht nachzustellen und der umschließenden vbox fehlt mMn eine vernünftige Höhenangabe. Hier mein Code und das Ergebnis ist angehängt (FF 60.5.2esr).
Code Auswählen
<!DOCTYPE html>
<html>
<head>
<title>Home-Tablet-UI</title>
<style>
</style>
</head>
  <body>
    <div class="" style="height:100vh;">
<!-- outer vbox -->
<div class="" style="height:12%;background-color:#c18181;">
<!-- slim top box -->
</div>
<div class="" style="height: 88%; background-color: red;">
<!-- large rest -->
<div class="" style="width:60%;height:88%;background-color:grey;">
<!-- left side -->
<div class="" style="height:50%;background-color:orange;">
<!-- left side top -->
</div>
<div class="" style="height:50%;background-color:green;">
<!-- left side bottom -->
</div>
</div>
<div class="" style="height:12%; background-color:blue;">
<!-- right side -->
</div>
</div>
</div>
</body>
</html>
Demnach würde ich mal in der umschließenden vbox die height: 100vh; hinzufügen und dann alle Kind-, Enkel-, Urenkel- usw Elemente explizit ausprägen:
Code Auswählen
<div class="vbox items-top" style="height: 100vh;">
(src)
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl
Drucken
Nach oben Seiten 1 ... 6 7 8
Benutzer-Aktionen