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?
<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>
<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)
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ß
Muss klappen.
Bitte eine saubere Installation (nur von Master) gewährleisten und die HTML Header laut Empfehlung anlegen.
<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>