#gelöst# Bitte um Hilfe bei Positionierung

[Helmi55]

Hallo
ich versuche schon eine Weile das Zahnrad rechts unten etwas mittiger  zu bekommen und auch "Status2 anzuzeigen. Ich hab da
nicht nur ein Brett vor dem Kopf sondern einen ganzen Wald

Code Auswählen Erweitern


* 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="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="118">
    <meta name="widget_base_height" content="130">
    <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 -->
    <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" />
    <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.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>Poolsteuerung</title>


und hier  das entsprechende Feld:

Code Auswählen Erweitern


<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
        <header>Roboter_auto</header>
        <div class="row top-space">
    <div class="col-2-4">
<div data-type="switch"
data-device="Roboter_auto"
data-set-on="on"
data-set-off="off"
data-get-on="on"
data-get-off="off"
data-icon="fa-power-off"
data-on-background-color="green"
data-off-background-color="red"
class="small">
</div>
<div data-type="label"
class="">&nbsp;Auto
</div>
    </div>
    <div class="col-2-4">&nbsp;
    </div>
        </div>
        <div class="row">
    <div class="col-2-4">&nbsp;
    </div>
    <div class="col-1-4">


<div data-type="symbol"
data-device="Roboter"
data-get-on="on"
data-get-off="off"
data-icon="fa-gear"
data-on-color="green"
data-off-color="red"
class="small">
</div>
<div data-type="label"
class="">Status
</div>
    </div>
        </div>
</li>


Ist bitte jemand so nett und sagt mir den Fehler und wie ich ihn beheben kann

Danke
Helmut

[Vaddi]

Ungefähr so?

Code Auswählen Erweitern

<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
        <header>Roboter_auto</header>
    <div class="inline">
<div data-type="switch"
data-device="Roboter_auto"
data-set-on="on"
data-set-off="off"
data-get-on="on"
data-get-off="off"
data-icon="fa-power-off"
data-on-background-color="green"
data-off-background-color="red"
class="small"></div>
<div class="">Auto</div>
    </div>


    <div class="newline">
<div data-type="symbol"
data-device="Roboter"
data-get-on="on"
data-get-off="off"
data-icon="fa-gear"
data-on-color="green"
data-off-color="red"
class="small"></div>
<div>Status</div>
    </div>

</li>

Lass bei statischen label das data-type="label" weg, spart Ressourcen.

[yersinia]

Man könnte auch mit

Code Auswählen Erweitern

<div class="vbox">
[...]
</div>
und

Code Auswählen Erweitern

<br />
für Zeilenumbrüche arbeiten.

[Helmi55]

Danke Vaddi
habe jetzt so gelöst, denn in deiner Version ist mir der "Status" unten rausgefallen?

Code Auswählen Erweitern


<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
       
    <div class="inline">
<div data-type="switch"
data-device="Roboter_auto"
data-set-on="on"
data-set-off="off"
data-get-on="on"
data-get-off="off"
data-icon="fa-power-off"
data-on-background-color="green"
data-off-background-color="red"
class="small"></div>
<div class="">Roboter-Auto</div>
    </div>
    <div class="newline">
<div data-type="symbol"
data-device="Roboter"
data-get-on="on"
data-get-off="off"
data-icon="fa-gear"
data-on-color="green"
data-off-color="red"
class="small"></div>
<div>Status</div>
    </div>



danke und schönen Sonntag noch
LG
Helmut