Guten Morgen,
seit ein paar Tagen beschäftige ich mich auch mit dem Tablet UI (eval 2.2).
Bin bisher sehr begeistert...großes Lob an dieser Stelle auch nochmal an den Entwickler und an alle, die mitwirken und ihre Designs zur Verfügung stellen
Eine erste Seite habe ich auch schon fast fertig gebaut, aber gestern stieß ich dann auf folgendes "Problem":
Ich möchte mir gerne am rechten Bildschirmrand meinen Abfallkalender per Symbol-Widgets anzeigen lassen. Das ganze steckt in einem <li> welcher 2 Spalten breit und fünf Reihen hoch ist. Wenn ich nun dort die einzelnen Symbole reinpacke, werden immer zwei in einer Reihe dargestellt (s. screenshot). Ich möchte die Symbole aber gerne einzeln untereinander, also einspaltig, dargestellt bekommen.
Und hier hänge ich seit gestern fest...ich dachte, wenn man das "inline" im class-Tag weglässt, wird für das nächste Objekt eine neue Zeile aufgemacht...
Hier noch der entsprechende Ausschnitt aus der index.html
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.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)
*
* !!!! Evaluation version - run only in a staging enviroment !!!!
*
* - create a new folder named 'tablet_eval' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
* - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
*/
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="106">
<meta name="widget_base_height" content="80">
<meta name="widget_margin" content="0">
<meta name="widget_min_cols" content="12">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="1">
<meta name="debug" content="2">
<meta http-equiv="Cache-Control" content="no-store" />
<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>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<script src="../pgm2/cordova-2.3.0.js" defer></script>
<script src="../pgm2/webviewcontrol.js" defer></script>
<!-- End for WebViewControl -->
<title>FHEM-Tablet-UI-eval</title>
</head>
<body>
<div class="gridster">
<!-- # Hier stehen noch weitere Widgets, die ich wegen der Übersichtlichkeit herausgelöscht habe # -->
<ul>
<li data-row="2" data-col="11" data-sizex="2" data-sizey="5" style="background-color:#11d597">
<div data-type="label" class="large top-space-2x">ABFALLKALENDER</div>
<div class="top-space-4x">
<div data-type="symbol"
data-device="du_muellabfuhr"
data-get="Biotonne"
data-icons='["fa-trash warn fa-blink","fa-trash warn"]'
data-on-colors='["green","green"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-on-background-color="white"
class="bigger">
</div>
<div data-type="symbol"
data-device="du_muellabfuhr"
data-get="GelbeTonne"
data-icons='["fa-trash warn fa-blink","fa-trash warn"]'
data-on-colors='["yellow","yellow"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-on-background-color="white"
class="bigger">
</div>
<div data-type="symbol"
data-device="du_muellabfuhr"
data-get="Papiertonne"
data-icons='["fa-trash warn fa-blink","fa-trash warn"]'
data-on-colors='["blue","blue"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-on-background-color="white"
class="bigger">
</div>
<div data-type="symbol"
data-device="du_muellabfuhr"
data-get="Restmuell"
data-icons='["fa-trash warn fa-blink","fa-trash warn"]'
data-on-colors='["black","black"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-on-background-color="white"
class="bigger">
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Bin für jegliche Hilfe dankbar!
Sonnigen Tag schonmal! 8)
Gruß
Andreas
Komisch, ich hätte auch erwartet, dass die DIVs sich untereinander anordnen ...
Probiere mal das bei jedem Symbol zuergänzen
class="bigger newline"
Zitat von: setstate am 20 Juli 2016, 10:03:21
Komisch, ich hätte auch erwartet, dass die DIVs sich untereinander anordnen ...
Probiere mal das bei jedem Symbol zuergänzen
class="bigger newline"
Alternativ ein Zeilenumbruch <br /> nach jedem Symbol... das tut's auch ^^
Hallo Mario,
hallo n4rrOx,
danke für die schnellen Antworten.
Werde ich heute Abend mal testen und dann berichten...
Gruß
Andreas
Zitat von: setstate am 20 Juli 2016, 10:03:21
Probiere mal das bei jedem Symbol zuergänzen
class="bigger newline"
Hallo,
hab es jetzt damit umgesetzt und passt...
Danke nochmal!
Gruß
Andreas