[Gelöst]readingsGroup wird nicht links Bündig dargestellt

Tommy82 · 22 Oktober 2017, 20:10:19

Hallo,
ich habe eine readingsGroup welche in Fhem auch wie es sein soll links Bündig dargestellt wird, allerdings in der FTUI wird sie Zentriert dargestellt, wieso und wie kann ich das lösen?

Danke

setstate · 22 Oktober 2017, 22:36:43

Vermutlich erbt es eine Style Eigenschaft des übergeordneten Containers. Das müsste man wieder überschreiben mit einem Style-Tag oder einer eigenen CSS class an geeigneter Stelle.

Tommy82 · 23 Oktober 2017, 20:22:11

Zitat von: setstate am 22 Oktober 2017, 22:36:43
Vermutlich erbt es eine Style Eigenschaft des übergeordneten Containers. Das müsste man wieder überschreiben mit einem Style-Tag oder einer eigenen CSS class an geeigneter Stelle.

Hi, wie müsste das aussehen und was wäre die geeignete Stelle?
Die rd. hab ich in der FTUI so eingebunden.

Code Auswählen

<!DOCTYPE html>
<html>
<head>
	<!-- 
	 /* FHEM tablet ui */
	 /*
	 * Just another dashboard for FHEM
	 *
         * Version: 1.3.5
	 * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
	 * URL: https://github.com/knowthelist/fhem-tablet-ui
	 *
	 * Copyright (c) 2015 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 tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
	 * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
	 */
	-->
	<title>Smarthome</title>
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="widget_base_width" content="127">
	<meta name="widget_base_height" content="108">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
	<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
	
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
	
	
	<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
	
	<!-- Enable this lines for usage with WebViewControl --><!-- -->
	<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
	<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
	<script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
	<!-- End for WebViewControl -->

</head>
<body>

<!-- available class: container,left,right,cell,narrow,darker,big,bigger,small,thin,large,wider -->
<!-- available data-type: symbol,dimmer,homestatus,label,push,slider,switch,thermostat,volume,weather -->

<div class="gridster">
<ul>
<!-- ============ Home-Button ============= -->
<!-- ====================================== -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<br>
 <div data-type="pagetab" data-url="index.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
 <div data-type="label" class="cell darker">Status</div>
 </li>

<!-- ========= Räume =========== -->
<!-- ====================================== -->
<li data-row="2" data-col="1" data-sizex="1" data-sizey="5">   
        <br>
        <div data-type="pagetab" data-url="Wohnzimmer.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
            <div data-type="label" class="cell darker">Wohnzimmer</div>
        <div data-type="pagetab" data-url="Kueche.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-kitchen" ></div>
            <div data-type="label" class="cell darker">Küche</div>
        <div data-type="pagetab" data-url="Flur_Erdgeschoss.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
            <div data-type="label" class="cell darker">Flur Erdges.</div>
        <div data-type="pagetab" data-url="Gaeste_WC.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-spa" ></div>
            <div data-type="label" class="cell darker">Gäste WC</div>
        <div data-type="pagetab" data-url="Aussen.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-store" ></div>
            <div data-type="label" class="cell darker">Außen</div>
        <div data-type="pagetab" data-url="Kellerflur.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
             <div data-type="label" class="cell darker">Kellerflur</div>
             </li>
 <li data-row="2" data-col="9" data-sizex="1" data-sizey="5"> 
        <br>
        <div data-type="pagetab" data-url="Kellerbar.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-local_bar" ></div>
             <div data-type="label" class="cell darker">Kellerbar</div>
        <div data-type="pagetab" data-url="Buero.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-border_color" ></div>
             <div data-type="label" class="cell darker">Büro</div>
        <div data-type="pagetab" data-url="Flur_Obergeschoss.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
             <div data-type="label" class="cell darker">Flur Oberges.</div>
        <div data-type="pagetab" data-url="Schlafzimmer.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-bed" ></div>
             <div data-type="label" class="cell darker">Schlafzimmer</div>
        <div data-type="pagetab" data-url="Kinderzimmer_Mila.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-face" ></div>
             <div data-type="label" class="cell darker">Kinderzimmer Mila</div>
        <div data-type="pagetab" data-url="Kinderzimmer_Laya.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-face" ></div>
             <div data-type="label" class="cell darker">Kinderzimmer Laya</div>
             </li>
               
<!-- ========= Gruppen ========== -->
<!-- ====================================== -->
<li data-row="1" data-col="2" data-sizex="8" data-sizey="1">
<br>
        
    <table style="width:100%">
        <tr>
            <td style="width:10%">
                <div data-type="pagetab" data-url="Heizung.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="oa-temp_temperature_max" ></div>
            </td>                
            <td style="width:10%">
            <div data-type="pagetab" data-url="Steckdosen.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-plug" ></div>
            </td>                
            <td style="width:10%">
            <div data-type="pagetab" data-url="Reciever.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-hd" ></div>
            </td>                
            <td style="width:10%">
            <div data-type="pagetab" data-url="Server.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-desktop" ></div>
            </td>                
            <td style="width:10%">
            <div data-type="pagetab" data-url="Fenster.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="oa-fts_window_roof" ></div>
            </td>                
            <td style="width:10%">
            <div data-type="pagetab" data-url="Alarm.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-add_alert" ></div>
            </td>                
            <td style="width:10%">
            <div data-type="pagetab" data-url="Telefon.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-settings_phone" ></div>
            </td>                
            <td style="width:10%">
            <div data-type="pagetab" data-url="Zentrale.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-info" ></div>
            </td>                
            <td style="width:10%">
            <div data-type="pagetab" data-url="Plots.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="mi-show_chart" ></div>
            </td>
        </tr>
        <tr>
            <td style="width:10%">
                <div data-type="label" class="cell darker">Heizung</div>
            </td>
           <td style="width:10%">
                <div data-type="label" class="cell darker">Steckdosen</div>
            </td>
            <td style="width:10%">
                <div data-type="label" class="cell darker">Reciever</div>
            </td>
            <td style="width:10%">
                <div data-type="label" class="cell darker">Server</div>
            </td>
            <td style="width:10%">
                <div data-type="label" class="cell darker">Fenster</div>
            </td>
            <td style="width:10%">
                <div data-type="label" class="cell darker">Alarm</div>
            </td>
            <td style="width:10%">
                <div data-type="label" class="cell darker">Telefon</div>
            </td>
            <td style="width:10%">
                <div data-type="label" class="cell darker">Zentrale</div>
            </td>
            <td style="width:10%">
                <div data-type="label" class="cell darker">Plots</div>
            </td>
        </tr>
    </table>
             </li>
             
<!-- ============= Platzhalter ================ -->
<!-- ====================================== -->
  <li data-row="5" data-col="2" data-sizex="2" data-sizey="1" style="background-color: transparent">

</li>

            
<!-- ============= Uhrzeit/Datum ================ -->
<!-- ====================================== -->

<li data-row="6" data-col="4" data-sizex="2" data-sizey="1">
    <header class="headerTransparent">Datum/Zeit</header><br>
             <div class="cell darker">
               <div class="algin-center">
               <font color="#ff8c00">
               <div class="big" data-type="clock" data-format="d-m-Y H:i:s"></div>
               </font>
            </div>
           </div>
        
    </li>



<!-- ========= SystemInfo ========== -->
<!-- ====================================== -->

 <li data-row="6" data-col="2" data-sizex="3" data-sizey="1">
    <header class="headerTransparent">Systeminfo</header><br>
    <div data-type="readingsgroup" data-device="rd_SysInfo" data-max-update="86400"></div>
    
 </li>

<!-- ========= rd Batterie Status ========== -->
<!-- ====================================== -->
<li data-row="2" data-col="5" data-sizex="5" data-sizey="4">
    <header class="headerTransparent">Batteriestatus1</header>
    <div data-type="readingsgroup" data-device="rd_Batterie" data-max-update="86400"></div>

</li>

<!-- ========= rd Batterie2 Status ========== -->
<!-- ====================================== -->
<li data-row="2" data-col="3" data-sizex="2" data-sizey="3">
    <header class="headerTransparent">Batteriestatus</header>
    <div data-type="readingsgroup" data-device="rd_Batterie2" data-max-update="86400"></div>

</li>

<!-- ============== Batterie Status Set Button ================ -->
<!-- ======================================= -->
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
        <header class="headerTransparent">Batterie Button</header>
        <br>
        <br>
    <div data-type="select" data-device="BATT_Status" data-icon="fa-server" data-get-on="on" data-get-off="off" data-set-on="on" data-on-color="#00ff00" data-off-color="#ff0000" data-on-background-color="transparent" data-off-background-color="transparent" class="narrow" >
    </div>
    

</li>
</ul>
</div>
</body>
</html>

phil82 · 23 Oktober 2017, 21:02:02

Hallo Tommy,

die Zentrierung kommt vermutlich aus dem CSS fhem-tablet-ui.css (body-Element) - die Datei solltest du aber nicht ändern, da diese beim Update wieder aktualisiert wird.

Wenn du das <div data-type="readingsgroup" ...> um die Style-Angabe 'style="text-align:left;"' erweiterst, dann sollte das schon funktionieren:

Code Auswählen

<div data-type="readingsgroup" data-device="rd_Batterie" data-max-update="86400" [color=red]style="text-align:left;[/color]></div>

Ich würde dir aber empfehlen, eine eigene CSS-Datei anzulegen und mit CSS-Klassen zu arbeiten. Dann kannst du die gleiche CSS-Klasse an mehreren Stellen wiederverwenden.... oder die Vorgaben vom TabletUI überschreiben.

Im Firefox (und vermutlich auch in anderen Browsern) gibt es die "Web-Entwickler-Werkzeuge" (Extras->Web-Entwickler->Werkzeuge einblenden). Im Reiter "Inspektor" lässt sich die HTML-Seite und die CSS-Vererbung recht gut analysieren und simulieren. Sehr Hilfreiches Tool - wie ich finde.

Gruß
Philipp

Tommy82 · 23 Oktober 2017, 21:15:03

Hi,
danke für den Tip, hab das jetzt mal im dif wie von dir beschrieben abgeändert, allerdings macht er jetzt so seltsame Zeilenumbrüche.
z.b. "Flur Ergeschoss Heizung" soll schon auf einer Zeile stehen nur halt links ausgerichtet

phil82 · 23 Oktober 2017, 21:49:17

Das kann ich dir aus der Ferne leider nicht beantworten.
Sollte nach meinem Verständniss aber nicht am text-align:left liegen, sondern an irgendwelchen Größen-Angaben. Vielleicht durch die readingsGroup, gridster oder anderen HTML-Elementen. Keine Ahnung.

Musste du mal mit dem Web-Entwickler-Werkzeuge schauen, woher das kommt.

Gruß
Philipp

Tommy82 · 24 Oktober 2017, 20:25:14

Hi, ich hab die Entwicklerwerkzeuge mal eingeblendet, allerdings finde ich das Problem nicht

Standarduser · 24 Oktober 2017, 21:45:49

Schau mal hier:
http://www.css4you.de/Texteigenschaften/white-space.html

Das bringt dich bestimmt weiter, wenn du damit den Text formatierst.

Tommy82 · 25 Oktober 2017, 20:27:51

Hi,
danke für den Tip,
aber es war viel einfacher, ich hatte in Bock drin das einmal die " fehlten.......