circlemenu verschiebt sich ungewollt

[PlanLos]

Hallo Leute,

ich habe ein Problem mit der Anzeige des Circle Menüs im FTUI.
Und zwar verschiebt sich der Button nach rechts (siehe Bild).

Kann wer helfen?

Code Auswählen Erweitern


<li data-col="1" data-row="1" data-sizey="2" data-sizex="2">
<header>Uhrzeit</header><br>
<div data-type="clock" data-format="H:i" class="container bigger"></div>
<div data-type="clock" data-format="d.m.Y" class="cell medium"></div>
</li>
<li data-col="3" data-row="1" data-sizey="2" data-sizex="10">
<header>Menü</header>
<div data-type="button" data-url="index.html" data-icon="fa-home" data-off-background-color="#aa6900"></div>
<div data-type="button" data-url="licht.html" data-icon="fa-lightbulb-o" data-off-background-color="#aa6900"></div>
<div data-type="button" data-url="heizung.html" data-icon="fa-fire" data-off-background-color="#aa6900"></div>
<div data-type="button" data-url="media.html" data-icon="fa-music" data-off-background-color="#aa6900"></div>
<div data-type="button" data-url="wetter.html" data-icon="fa-cloud" data-off-background-color="#aa6900"></div>
<div data-type="circlemenu" class="cell circlemenu keepopen" data-direction="bottom" data-circle-radius="65">
<ul class="menu">
<li>
<div data-type="button" data-icon="fa-line-chart" data-off-background-color="#aa6900"></div>
</li>
<li><div data-type="button" data-url="statistik_wohnbereich.html" data-icon="fa-group" data-off-background-color="#aa6900"></div></li>
<li><div data-type="button" data-url="statistik_dachboden.html" data-icon="fa-home" data-off-background-color="#aa6900"></div></li>
<li><div data-type="button" data-url="statistik_aussen.html" data-icon="fa-leaf" data-off-background-color="#aa6900"></div></li>
</ul>
</div>
<div data-type="button" data-url="system.html" data-icon="fa-sliders" data-off-background-color="#aa6900"></div>
</li>


[setstate]

Code Auswählen Erweitern


<li data-col="3" data-row="1" data-sizey="2" data-sizex="10">
    <header>Menü</header>
    <div class="center">
        <div data-type="button" data-url="index.html" data-icon="fa-home" data-off-background-color="#aa6900"></div>
        <div data-type="button" data-url="licht.html" data-icon="fa-lightbulb-o" data-off-background-color="#aa6900"></div>
        <div data-type="button" data-url="heizung.html" data-icon="fa-fire" data-off-background-color="#aa6900"></div>
        <div data-type="button" data-url="media.html" data-icon="fa-music" data-off-background-color="#aa6900"></div>
        <div data-type="button" data-url="wetter.html" data-icon="fa-cloud" data-off-background-color="#aa6900"></div>
        <div data-type="circlemenu" class="keepopen" data-direction="bottom" data-circle-radius="65">
                <ul>
                        <li>
                                <div data-type="button" data-icon="fa-line-chart" data-off-background-color="#aa6900"></div>
                        </li>
                        <li><div data-type="button" data-url="statistik_wohnbereich.html" data-icon="fa-group" data-off-background-color="#aa6900"></div></li>
                        <li><div data-type="button" data-url="statistik_dachboden.html" data-icon="fa-home" data-off-background-color="#aa6900"></div></li>
                        <li><div data-type="button" data-url="statistik_aussen.html" data-icon="fa-leaf" data-off-background-color="#aa6900"></div></li>
                </ul>
        </div>
        <div data-type="button" data-url="system.html" data-icon="fa-sliders" data-off-background-color="#aa6900"></div>
    </div>
</li>



Wenn man class="cell" verbaut, dann bekommt dieses Element auch mehr Platz oben und rechts !!!

Also:
- class="cell" -> weg (bringt Extra Abstände rein)
- class="circlemenu" -> weg (völlig unnötig)
- class="menu" -> weg (in diesem Zusammenhang völlig falsch)
- <div class="center"> -> rein (wenn die Buttons in der Mitte des Gridster Elements sitzen sollen)

[PlanLos]

Danke für die Antwort.
Sieht jetzt von der Anordnung echt supi aus.

Doch das passiert wenn ich auf den cirkle Button klicke --> siehe Screenshot 1

Mit class="menu" passiert das nicht --> siehe Screenshot 2
Nur dann sieh die Anordnung nur wieder kacke aus.

Gruß

[setstate]

Muss klappen.

Bitte eine saubere Installation (nur von Master) gewährleisten und die HTML Header laut Empfehlung anlegen.

Code Auswählen Erweitern


<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * 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)
     *
     * - 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="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="2"> <!-- verbose level 1-6 = output to console;0 = not output -->

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <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" />

    <!-- 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</title>
</head>