pagebutton - immer alles untereinander

grossmaggul · 26 August 2017, 10:42:49

Hallo,

ich versuche mich hier gerade an der Umstellung auf pagebutton.
Aber egal was ich mache, meine Widgets sind auf den Seiten immer untereinander statt nebeneinander angeordnet.
Vielleicht kann sich mal jemand den Code ansehen und mir den Fehler, den ich wohl mache, aufzeigen.

index.html

Code Auswählen

<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 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='gridster_disable' content='1'>
    <meta name='gridster_resize' content='0'>
    
    <meta name="longpoll" content="1">
    <meta name="longpoll_type" content="1">
    <meta name="longpoll_filter" content=".*">
    <meta name='longpoll_maxage' content='240'>
    <meta name="shortpoll_interval" content="10">
    
    
    <meta name="widget_base_width" content="122">
    <meta name="widget_base_height" content="146">
    
    <link rel="icon" href="favicon.ico" type="image/x-icon" />


    <!-- 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="js/fhem-tablet-ui.js" defer></script>

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

<body>
    <div class="gridster">
        <ul>
            <!---------->
            <!-- Menü -->
            <!---------->
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu.html"></li>
            
            <li data-row="1" data-col="2" data-sizex="8" data-sizey="5">
                <div class="page" id="home"></div>
                <div class="page" id="page2"></div>
                <div class="page" id="page3"></div>
            </li>
            
            
            
        </ul>
    </div>
</body>

</html>

menu.html

Code Auswählen

<header class="big green">Menü</header>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="5">
    <div data-type="pagebutton"
         data-url="#home.html"
         data-load="#home"
         data-active-pattern=".*#home.html"
         data-icon="fa-home"
         data-background-icon="fa-circle-thin"
         data-on-color="lightblue"
         data-off-background-color="grey" 
         data-on-background-color="lightblue"
         class="default big top-space-1x nocache">
    </div>
    <div data-type="pagebutton"
         data-url="#page2.html"
         data-load="#page2"
         data-active-pattern=".*#page2.html"
         data-icon="mi-music_video">
    </div>
    <div data-type="pagebutton"
         data-url="#page3.html"
         data-load="#page3"
         data-active-pattern=".*#page3.html"
         data-icon="mi-tv">
    </div>

home.html

Code Auswählen

<div class="page" id="home">
    
    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
    Kasten 1
    </li>
    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
    Kasten 2
    </li>
</div>

Danke!

Marc-Antón

setstate · 26 August 2017, 11:16:10

Aber SizeX von 1 und SizeY von 5 ist für mich senkrecht und nicht wagerecht.

Unabhängig davon: Elementen nebeneinander -> jedes Element ein class="inline" spendieren
oder alle Elemente in ein <div class="hbox"> ... </div> wrappen

grossmaggul · 26 August 2017, 12:53:51

ZitatAber SizeX von 1 und SizeY von 5 ist für mich senkrecht und nicht wagerecht.

Schon klar, es geht aber nicht um das Menü, sondern um die Seiten. Das Menü ist senkrecht und das soll auch so. Es geht um die home.html.

ZitatUnabhängig davon: Elementen nebeneinander -> jedes Element ein class="inline" spendieren

Das leuchtet mir jetzt irgendwie nicht ein, wenn ich

Code Auswählen

<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
und

Code Auswählen

<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">

angebe, wieso setzt er mir die dann untereinander, gebe ich nicht mit data-row und data-col die Position des Elementes an?
Wieso soll ich da jetzt auch noch ein class=inline setzen?

setstate · 26 August 2017, 13:50:29

mein Tipp war für DIVs.
Die Unterseite braucht ein eigenes Gridster "Gehäuse". Es ordnet sich nicht in das der Hauptseite ein. Das der Hauptseite ist schon initiiert und damit fertig.

Code Auswählen


<div class="page" id="home">
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
                Kasten 1
            </li>
            <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
                Kasten 2
            </li>
        </ul>
    </div>
</div>

grossmaggul · 26 August 2017, 14:08:09

Ah, o.k., macht ja auch Sinn, danke für den Stups in die richtige Richtung.

FHEM Forum

pagebutton - immer alles untereinander

grossmaggul

setstate

grossmaggul

setstate

grossmaggul