FHEM Ftui flex

Tutti_Bomovski · 04 November 2020, 14:32:42

Hallo Zusammen,
ich habe mich mit meinem spärlichen Wissen

an die Umstellung von Gridster auf Flex gewagt und mein FTUI quasi neu aufgebaut.
Soweit so gut

ist mir das nach anfänglichen Schwierigkeiten auch gelungen.

Ein Problem besteht allerdings noch.
Bei einigen Seiten ist der Inhalt größer als die zur Verfügung stehende Seite.
Der obere Teil einer "Kachel" bleibt dann nicht oben am Rand stehen und ich kann nach unten Scrollen, sondern "verschwindet" ein wenig.

Ich versuche mal mit dem Screenshot anbei mein "Problem" ein wenig zu veranschaulichen.

Tutti_Bomovski · 04 November 2020, 14:44:48

Ich vermute ein wenig das es mit den Bildern zu tun haben könnte.

Freue mich auf Eure Lösungsvorschläge.

MKeY · 04 November 2020, 18:36:02

pack doch mal dein code der Seite rein in die hashtags

Tutti_Bomovski · 05 November 2020, 07:31:57

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.3
     * 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)
     *
     * Example for a flexbox layout instead of gridster
     */
    -->
    <meta name="viewport" content="width=device-width, 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="0"> <!-- 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/material-icons.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-tablet-ui-user.css" / -->
    <link rel="stylesheet" href="css/user-tablet-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>

    <title>FHEM Hausautomatisierung</title>
</head>
<body>
<main>

	<div class="hbox grow-0 bg-lightgray">
	    <div class="vbox bg-ligthgray">
        	<div class="card"><header>Menü</header><div data-type="link" class="center round" data-width="130" data-height="50" data-color="white" data-icon="fa-angle-left" data-url="index.html">HAUPTMENÜ</div></div>
    	</div>

            <div class="hbox grow-5">
                <div class="vbox phone-width">
                    <div class="card lift">
                        <header>
                            <div class="hdm-flexbox-container">
                                <div class="left-align hdm-flexbox-item-20
                                    left-align left-space">Land</div>
                                <div class="center hdm-flexbox-item-15">Gesamt</div>
                                <div class="center hdm-flexbox-item-10">Gesamt /
                                    Mio</div>
                                <div class="center hdm-flexbox-item-15">Neu</div>
                                <div class="center hdm-flexbox-item-10">Erkrankt</div>
                                <div class="center hdm-flexbox-item-10">&dagger;</div>
                                <div class="center hdm-flexbox-item-10">neu
                                    &dagger;</div>
                                <div class="center hdm-flexbox-item-10">Geheilt</div>
                            </div>
                        </header>
                        <section>
                            <div
                                data-template="template/template_news_corona.html"
                                data-parameter='{"var_device" :"coronaSpreadWorld" ,"var_country"
                                :"world" }'></div>
                        </section>
                        <section>
                            <div
                                data-template="template/template_news_corona.html"
                                data-parameter='{"var_device" :"coronaSpread" ,"var_country"
                                :"DEU" }'></div>
                        </section>
                        <section>
                            <div
                                data-template="template/template_news_corona.html"
                                data-parameter='{"var_device" :"coronaSpread" ,"var_country"
                                :"CHN" }'></div>
                        </section>
                        <section>
                            <div
                                data-template="template/template_news_corona.html"
                                data-parameter='{"var_device" :"coronaSpread" ,"var_country"
                                :"ITA" }'></div>
                        </section>
                        <section>
                            <div
                                data-template="template/template_news_corona.html"
                                data-parameter='{"var_device" :"coronaSpread" ,"var_country"
                                :"USA" }'></div>
                        </section>
                        <section>
                            <div
                                data-template="template/template_news_corona.html"
                                data-parameter='{"var_device" :"coronaSpread" ,"var_country" :"ESP" }'></div>
                        </section>
                        <section>
                            <div
                                data-template="template/template_news_corona.html"
                                data-parameter='{"var_device" :"coronaSpread" ,"var_country"
                                :"IRN" }'></div>
                        </section>
                        <section>
                            <div
                                data-template="template/template_news_corona.html"
                                data-parameter='{"var_device" :"coronaSpread" ,"var_country"
                                :"FRA" }'></div>
                        </section>
                        <section>
                            <div
                                data-template="template/template_news_corona.html"
                                data-parameter='{"var_device" :"coronaSpread" ,"var_country"
                                :"GBR" }'></div>
                        </section>
                        <section>
                            <div
                                data-template="template/template_news_corona.html"
                                data-parameter='{"var_device" :"coronaSpread" ,"var_country"
                                :"NLD"
                                }'></div>
                        </section>
                        <div data-type="label" data-pre-text="Letztes Update
                            vor " data-device="coronaSpreadWorld" 
                            data-substitution="toDate().ago()"
                            data-get="updated_human" class="bigger
                            darker right-align right-space"></div>
                    </div>
                </div>
            </div>
        </div>

</main>
</body>
</html>

MKeY · 05 November 2020, 17:26:38

Soweit ich das ohne deine templates zuordnen kann, liegt ein Grund mMn an den

Code Auswählen

<section> bereichen, denn die haben in der UI.css eine feste Mindesthöhe

Tutti_Bomovski · 06 November 2020, 07:54:53

Zitat von: MKeY am 05 November 2020, 17:26:38
Soweit ich das ohne deine templates zuordnen kann, liegt ein Grund mMn an den
Code Auswählen Erweitern
<section> bereichen, denn die haben in der UI.css eine feste Mindesthöhe

Danke für deine Rückmeldung.
Hier mal der Code vom Template.

Code Auswählen

<!DOCTYPE html>
<html>

    <head>
        <!-- FHEM Tablet UI V2.6 -->
        <!-- Template f�r Corona -->
    </head>

    <body>
        <div class="hdm-flexbox-container">
            <div class="hdm-flexbox-item-20 left-align left-space">
                <div data-type="image" data-url="images/flags/var_country.png" data-refresh=0 data-height=20.8 data-width=35 class="inline"></div>
                <div class="bigger inline" data-type="label" data-device="var_device" data-get="var_country_name" data-substitution='["Iran, Islamic Republic of","Iran","Nordrhein-Westfalen","NRW","Baden-Wurttemberg","BaWu","Mecklenburg-Vorpommern","MeckPom"]'></div>
            </div>
            <div class="hdm-flexbox-item-15">
                <div class="compressed" data-type="symbol" data-icon="mi-people" data-off-color="blue"></div>
                <div class="bigger" data-type="label" data-device="var_device" data-get="var_country_cases"></div>
            </div>
            <div class="hdm-flexbox-item-10">
                <div class="compressed" data-type="symbol" data-icon="mi-people_outline" data-off-color="blue"></div>
                <div class="bigger" data-type="label" data-device="var_device" data-get="var_country_casesPerOneMillion" data-fix="1"></div>
            </div>
            <div class="hdm-flexbox-item-15">
                <div class="compressed" data-type="symbol" data-icon="mi-update" data-off-color="blue"></div>
                <div class="bigger inline" data-type="label" data-device="var_device" data-get="var_country_todayCases"></div>
                <div class="normal inline" data-type="label" data-device="var_device" data-pre-text="(" data-get="var_country_procent_todayCases"
                    data-post-text="%)" data-fix="1"></div>
            </div>
            <div class="hdm-flexbox-item-10">
                <div class="compressed" data-type="symbol" data-icon="mi-local_hospital" data-off-color="yellow"></div>
                <div class="bigger inline" data-type="label" data-device="var_device" data-get="var_country_active"></div>
                <div class="normal inline" data-type="label" data-device="var_device" data-pre-text="(" data-get="var_country_critical"
                    data-post-text=")"></div>
            </div>
            <div class="hdm-flexbox-item-10">
                <div class="compressed" data-type="symbol" data-icon="mi-sentiment_dissatisfied" data-off-color="orange"></div>
                <div class="bigger" data-type="label" data-device="var_device" data-get="var_country_deaths"></div>
            </div>
            <div class="hdm-flexbox-item-10">
                <div class="compressed" data-type="symbol" data-icon="mi-update" data-off-color="orange"></div>
                <div class="bigger inline" data-type="label" data-device="var_device" data-get="var_country_todayDeaths"></div>
                <div class="normal inline" data-type="label" data-device="var_device" data-pre-text="(" data-get="var_country_procent_todayDeaths"
                    data-post-text="%)" data-fix="1"></div>
            </div>
            <div class="hdm-flexbox-item-10">
                <div class="compressed" data-type="symbol" data-icon="mi-sentiment_satisfied" data-off-color="green"></div>
                <div class="bigger" data-type="label" data-device="var_device" data-get="var_country_recovered"></div>
            </div>
        </div>
    </body>

</html>

Tutti_Bomovski · 06 November 2020, 08:54:18

und hier noch die user-tablet-ui

Code Auswählen

/* FHEM Tablet UI 2.6 - eigene Anpassungen */


/* Phone-Header und Phone-Backbutton Definition */

.phone-header {
    display: none;
}

.phone-back-btn {
    display: none;
}


/* Menübreite und Zeilenabstand der Menüpunkte korrigiert*/

@media screen and (max-width: 900px) and (min-width: 480px) {
    .menu {
        width: 90px !important;
    }
}


/* Menüleiste oben auf Bildschirmbreite angepasst, damit keine Elemente mehr überdeckt werden */

@media screen and (max-width: 480px) {
    .menu ~ main > .page {
        padding-left: 0px;
        padding-top: 40px;
    }
    .phone-header {
        top: 0px;
        left: 0px;
        height: 40px;
        width: 100%;
        position: absolute;
        background: #1D1F20;
        z-index: 4;
        display: block;
    }
    .phone-back-btn {
        top: 0px;
        left: 0px;
        height: 39px;
        width: 39px;
        position: absolute;
        background: #1D1F20;
        padding-top: 0.31em;
        z-index: 5;
        display: block;
    }
}


/* Header Hintergrundfarbe und Schriftgröße korrigiert */

.card > header {
    /*    background-color: #e6e6e6;*/
    font-size: 125%;
}


/* Weather Iconfarbe korrektur */

.weather:before {
    color: #337ab7;
}


/* Chart Farben und Text Korrekturen */

.chart-background {
    fill: #fff !important;
}

.gridlines {
    stroke: #222222 !important;
}

.text.axes {
    fill: #222222 !important;
    font-size: smaller;
    font-family: "Helvetica Neue", "Helvetica", "Open Sans", "Arial", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.legend {
    font-size: smaller;
    font-family: "Helvetica Neue", "Helvetica", "Open Sans", "Arial", sans-serif;
    -webkit-font-smoothing: antialiased;
}


/* Section Korrektur für die Höhen */

section {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.6em;
}


/* quer/hoch verschiebungen vom header */

.page .vbox {
    justify-content: initial;
}


/* Flexbox layout */


/*
.hbox,
.vbox,
.box,
.has_vbox {
    display: flex !important;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    width: 100%;
}
*/


/* iphone like scroll */

body {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}


/* hdm flexbox */


/* Workaround für Zellenverteilung mit hdm flexbox */

.hdm-flexbox-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.hdm-flexbox-item {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    width: auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.hdm-flexbox-item-5 {
    -webkit-box-flex: 1 1 5%;
    -moz-box-flex: 1 1 5%;
    width: 5%;
    -webkit-flex: 1 1 5%;
    -ms-flex: 1 1 5%;
    flex: 1 1 5%;
}

.hdm-flexbox-item-10 {
    -webkit-box-flex: 1 1 10%;
    -moz-box-flex: 1 1 10%;
    width: 10%;
    -webkit-flex: 1 1 10%;
    -ms-flex: 1 1 10%;
    flex: 1 1 10%;
}

.hdm-flexbox-item-13 {
    -webkit-box-flex: 1 1 13%;
    -moz-box-flex: 1 1 13%;
    width: 13%;
    -webkit-flex: 1 1 13%;
    -ms-flex: 1 1 13%;
    flex: 1 1 13%;
}

.hdm-flexbox-item-15 {
    -webkit-box-flex: 1 1 15%;
    -moz-box-flex: 1 1 15%;
    width: 15%;
    -webkit-flex: 1 1 15%;
    -ms-flex: 1 1 15%;
    flex: 1 1 15%;
}

.hdm-flexbox-item-20 {
    -webkit-box-flex: 1 1 20%;
    -moz-box-flex: 1 1 20%;
    width: 20%;
    -webkit-flex: 1 1 20%;
    -ms-flex: 1 1 20%;
    flex: 1 1 20%;
}

.hdm-flexbox-item-25 {
    -webkit-box-flex: 1 1 25%;
    -moz-box-flex: 1 1 25%;
    width: 25%;
    -webkit-flex: 1 1 25%;
    -ms-flex: 1 1 25%;
    flex: 1 1 25%;
}

.hdm-flexbox-item-30 {
    -webkit-box-flex: 1 1 30%;
    -moz-box-flex: 1 1 30%;
    width: 30%;
    -webkit-flex: 1 1 30%;
    -ms-flex: 1 1 30%;
    flex: 1 1 30%;
}

.hdm-flexbox-item-33 {
    -webkit-box-flex: 1 1 33%;
    -moz-box-flex: 1 1 33%;
    width: 33%;
    -webkit-flex: 1 1 33%;
    -ms-flex: 1 1 33%;
    flex: 1 1 33%;
}

.hdm-flexbox-item-40 {
    -webkit-box-flex: 1 1 40%;
    -moz-box-flex: 1 1 40%;
    width: 40%;
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
}

.hdm-flexbox-item-45 {
    -webkit-box-flex: 1 1 45%;
    -moz-box-flex: 1 1 45%;
    width: 45%;
    -webkit-flex: 1 1 45%;
    -ms-flex: 1 1 45%;
    flex: 1 1 45%;
}

.hdm-flexbox-item-50 {
    -webkit-box-flex: 1 1 50%;
    -moz-box-flex: 1 1 50%;
    width: 50%;
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
}

.hdm-flexbox-item-70 {
    -webkit-box-flex: 1 1 70%;
    -moz-box-flex: 1 1 70%;
    width: 70%;
    -webkit-flex: 1 1 70%;
    -ms-flex: 1 1 70%;
    flex: 1 1 70%;
}

.hdm-flexbox-item-80 {
    -webkit-box-flex: 1 1 80%;
    -moz-box-flex: 1 1 80%;
    width: 80%;
    -webkit-flex: 1 1 80%;
    -ms-flex: 1 1 80%;
    flex: 1 1 80%;
}


/* hdm flexbox */

Tutti_Bomovski · 06 November 2020, 09:32:20

Ich habe heute noch mal ein wenig rumprobiert.
Es scheint tatsächlich an Template und/oder css zu liegen.
Die Schriftgröße kann ich durch class="small" oder class ="mini" anpassen.
Auch die Größe der Bilder habe ich über das Template angepasst bekommen.

Was noch fehlt ist quasi die Zeilenhöhe. Die Abstände nach oben unten...
Ich vermute mal was aus der CSS bin mir aber nicht sicher.

Code Auswählen

/* Section Korrektur für die Höhen */

section {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.6em;
}

MKeY · 07 November 2020, 10:34:02

in der fhem-tablet-ui.css ist section mit einer Höhe definiert

Code Auswählen

section {
    border-bottom: 1px solid #888;
    min-height: 4.5em;
    line-height: 4.5em
}