Position in Gridster?

Paul · 12 Dezember 2018, 19:45:12

Hallo,

ich bekomme es seit Stunden nicht hin. Ich möchte die Überschrift, hier Anrufliste links haben, Gemäß wiki sollte das mit class="left-align" eigentlich gehen.

Aber egal was ich eingebe bleibt die Überschrift mittig.

Code Auswählen

<li data-row="5" data-col="1" data-sizey="1" data-sizex="2" class="bg-black">
<div class="left-align large bold">Anrufliste</div>

<div class="vbox">
<div class="hbox items-space-between items-bottom">
<div data-type="label" data-device="Anrufeabw"data-get="1-timestamp"></div>
<div data-type="label" data-device="Anrufeabw"data-get="1-name"></div>
<div data-type="label" data-device="Anrufeabw"data-get="1-number"></div>
</div>
<div class="hbox items-space-between">
<div data-type="label" data-device="Anrufeabw"data-get="2-timestamp"></div>
<div data-type="label" data-device="Anrufeabw"data-get="2-name"></div>
<div data-type="label" data-device="Anrufeabw"data-get="2-number"></div>
</div>
<div class="hbox items-space-between items-top">
<div data-type="label" data-device="Anrufeabw"data-get="3-timestamp"></div>
<div data-type="label" data-device="Anrufeabw"data-get="3-name"></div>
<div data-type="label" data-device="Anrufeabw"data-get="3-number"></div>
</div>
<div class="hbox items-space-between items-top">
<div data-type="label" data-device="Anrufeabw"data-get="4-timestamp"></div>
<div data-type="label" data-device="Anrufeabw"data-get="4-name"></div>
<div data-type="label" data-device="Anrufeabw"data-get="4-number"></div>
</div>
<div class="hbox items-space-between items-top">
<div data-type="label" data-device="Anrufeabw"data-get="5-timestamp"></div>
<div data-type="label" data-device="Anrufeabw"data-get="5-name"></div>
<div data-type="label" data-device="Anrufeabw"data-get="5-number"></div>
</div>
</div>
</li>

ich kann auch wenn nötig die gesamte html-Seite posten.

Vaddi · 12 Dezember 2018, 21:03:04

Hey, versuche mal
style="align-self: baseline;"

Paul · 13 Dezember 2018, 00:18:21

Du meinst so?

Code Auswählen

<div class="style=align-self: baseline; large bold">Anrufliste in Abwesenheit</div>

da habe ich keine Veränderung

tomster · 13 Dezember 2018, 00:50:27

Nö, er meint für das div ein style-tag verwenden.

Code Auswählen


<div style="..."></div>

Eventuell würde auch ein schlichtes "left" in der class das Problem lösen (kann es aber grad nicht testen). FTUI ist "mächtig" und setstate hat sich wirklich seeehr viele Gedanken zum CSS gemacht. Und vielleicht spielt ggfls. auch der eine oder andere tag ineinander. Jedoch wirkt auch hier ein style-tag an der richtigen Stelle oft Wunder. Wie so oft: individuelles Problem? Versuche individuelles Ausprobieren!

Paul · 13 Dezember 2018, 01:16:59

das mit dem " left " hatte ich bereits erfolglos probiert.

also so

Code Auswählen

<div style="style=align-self: baseline;">
<div class="large bold">
Anrufliste</div>
</div>

bringt es leider auch nicht.

setstate · 13 Dezember 2018, 06:39:47

ist es nicht eher die ganze Kachel, die zu weit links. ist. Ich würde mit data-row="5" data-col="x" spielen.

Paul · 13 Dezember 2018, 11:46:25

Zitat von: setstate am 13 Dezember 2018, 06:39:47
ist es nicht eher die ganze Kachel, die zu weit links. ist. Ich würde mit data-row="5" data-col="x" spielen.

Hallo, ich habe gestern bereits ca. 6 Stunden "gespielt"

. Man merkt ich habe nicht viel Ahnung, aber Spaß was zu lernen.

Vielleicht liegt mein Problem auch daran, dass ich mit Gridster und HBox kombiniere und HBox laut wiki keine Positionen wie links und rechts-Ausrichtung unterstützt? Aber anders habe ich durch ausprobieren die Wetteranzeige nicht hinbekommen.
In Bild 3 hat man wohl eine Vorstellung wie die Seite aussehen soll. Auch klappt es wohl nicht, das die Hbox sich wie im Wiki steht "welches sich automatisch an die verfügbare Displaygröße anpasst." (siehe Bild 2).

PS. Es soll nur ein einfacher Bilderrahmen werden.

Hier noch mein Code:

Code Auswählen

<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.7.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2018 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
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/index_empty.html
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />


    <!-- 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="js/fhem-tablet-ui.min.js" defer></script>
<meta name="widget_margin" content="0">
    <title>FHEM-Tablet-UI</title>
</head>

<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="4" data-sizey="1" class="bg-black">
                
             
		
	     <div class="top-space-2x left">
		<div data-type="clock" data-format="H:i" class="tall"></div>
		 <div data-type="clock" data-shortday-length="2" data-format=" D. d.m.Y" ></div>
	</div>

				
	
                
	  
                
            </li> 





	<li data-row="1" data-col="5" data-sizey="1" data-sizex="2" class="bg-black">
		<div class="sheet">
                    <div class="row">
<div class="cell small" data-type="weather" data-device="WetterPro" data-get="weather" data-imageset="kleinklima"></div>
<div class="cell"><div data-type="label" data-device="Aussen" data-part="2" data-fix="1" data-unit="%B0C%0A" class="tall top-space-1x"></div></div></div></div>	
			

</li>	<li data-row="2" data-col="1" data-sizey="1" data-sizex="6" class="bg-black">
	<div class="hbox">
                    
		<div class="vbox">
	<div class="bold">9:00 Uhr</div>
	<div class="mini" data-type="weather" data-device="WetterPro" data-get="fc0_weather09Icon" data-imageset="kleinklima" ></div>
	
	<div data-type="label" data-device="WetterPro" data-get="fc0_temp09" data-unit="%B0C%0A" class="normal bold"></div>
		</div>

		<div class="vbox">
	<div class="bold">12:00 Uhr</div>
	<div class="mini" data-type="weather" data-device="WetterPro" data-get="fc0_weather12Icon" data-imageset="kleinklima"></div>
	<div data-type="label" data-device="WetterPro" data-get="fc0_temp12" data-unit="%B0C%0A" class="normal bold"></div>
		</div>

		<div class="vbox">
	<div class="bold">15:00 Uhr</div>
	<div class="mini" data-type="weather" data-device="WetterPro" data-get="fc0_weather15Icon" data-imageset="kleinklima"></div>			
	<div data-type="label" data-device="WetterPro" data-get="fc0_temp15" data-unit="%B0C%0A" class="normal bold"></div>
		</div>

		<div class="vbox">
	<div class="bold">18:00 Uhr</div>
	<div class="mini" data-type="weather" data-device="WetterPro" data-get="fc0_weather18Icon" data-imageset="kleinklima"></div>
	<div data-type="label" data-device="WetterPro" data-get="fc0_temp18" data-unit="%B0C%0A" class="normal bold"></div>
		</div>

		<div class="vbox">
	<div class="bold">21:00 Uhr</div>
	<div class="mini" data-type="weather" data-device="WetterPro" data-get="fc0_weather21Icon" data-imageset="kleinklima"></div>
	<div data-type="label" data-device="WetterPro" data-get="fc0_temp21" data-unit="%B0C%0A" class="normal bold"></div>
		</div>
		</div>

	</li>
	
<li data-row="3" data-col="1" data-sizey="1" data-sizex="1" class="bg-black">
	

		
		<div class="left-align large bold">Wetterausblick</div>
		<div class="vbox">
		<div class="hbox items-space-between items-bottom">
		<div data-type="label" data-device="WetterPro" data-get="fc1_date" data-unit=":"></div>
		<div class="mini" data-type="weather" data-device="WetterPro" data-get="fc1_weatherDayIcon" data-imageset="kleinklima" ></div>
		<div data-type="label" data-device="WetterPro" data-get="fc1_tempMax" data-unit="%B0C%0A"></div>
		<div class="mini" data-type="weather" data-device="WetterPro" data-get="fc1_weatherNightIcon" data-imageset="kleinklima" ></div>
		<div data-type="label" data-device="WetterPro" data-get="fc1_tempMin" data-unit="%B0C%0A"></div>
		</div>

		<div class="hbox items-space-between items-bottom items-top">
		<div data-type="label" data-device="WetterPro" data-get="fc2_date" data-unit=":"></div>
		<div class="mini" data-type="weather" data-device="WetterPro" data-get="fc2_weatherDayIcon" data-imageset="kleinklima" ></div>
		<div data-type="label" data-device="WetterPro" data-get="fc2_tempMax" data-unit="%B0C%0A"></div>
		<div class="mini" data-type="weather" data-device="WetterPro" data-get="fc2_weatherNightIcon" data-imageset="kleinklima" ></div>
		<div data-type="label" data-device="WetterPro" data-get="fc2_tempMin" data-unit="%B0C%0A"></div>
		</div>

		<div class="hbox items-space-between items-bottom items-top">
		<div data-type="label" data-device="WetterPro" data-get="fc3_date" data-unit=":"></div>
		<div class="mini" data-type="weather" data-device="WetterPro" data-get="fc3_weatherDayIcon" data-imageset="kleinklima" ></div>
		<div data-type="label" data-device="WetterPro" data-get="fc3_tempMax" data-unit="%B0C%0A"></div>
		<div class="mini" data-type="weather" data-device="WetterPro" data-get="fc3_weatherNightIcon" data-imageset="kleinklima" ></div>
		<div data-type="label" data-device="WetterPro" data-get="fc3_tempMin" data-unit="%B0C%0A"></div>
		</div>

		<div class="hbox items-space-between items-bottom items-top">
		<div data-type="label" data-device="WetterPro" data-get="fc4_date" data-unit=":"></div>
		<div class="mini" data-type="weather" data-device="WetterPro" data-get="fc4_weatherDayIcon" data-imageset="kleinklima" ></div>
		<div data-type="label" data-device="WetterPro" data-get="fc4_tempMax" data-unit="%B0C%0A"></div>
		<div class="mini" data-type="weather" data-device="WetterPro" data-get="fc4_weatherNightIcon" data-imageset="kleinklima" ></div>
		<div data-type="label" data-device="WetterPro" data-get="fc4_tempMin" data-unit="%B0C%0A"></div>
		</div>
		<div class="hbox items-space-between items-bottom items-top">
		
		</div>
	</div>       
</li>

<li data-row="5" data-col="1" data-sizey="1" data-sizex="2" class="bg-black">
<div style=left-align>Anrufliste</div>
<div class="large bold">
Anrufliste</div>
<div class="vbox">
<div class="hbox items-space-between items-bottom">
<div data-type="label" data-device="Anrufeabw" data-get="1-timestamp"></div>
<div data-type="label" data-device="Anrufeabw" data-get="1-name"></div>
<div data-type="label" data-device="Anrufeabw" data-get="1-number"></div>
</div>
<div class="hbox items-space-between">
<div data-type="label" data-device="Anrufeabw" data-get="2-timestamp"></div>
<div data-type="label" data-device="Anrufeabw" data-get="2-name"></div>
<div data-type="label" data-device="Anrufeabw" data-get="2-number"></div>
</div>
<div class="hbox items-space-between items-top">
<div data-type="label" data-device="Anrufeabw" data-get="3-timestamp"></div>
<div data-type="label" data-device="Anrufeabw" data-get="3-name"></div>
<div data-type="label" data-device="Anrufeabw" data-get="3-number"></div>
</div>
<div class="hbox items-space-between items-top">
<div data-type="label" data-device="Anrufeabw" data-get="4-timestamp"></div>
<div data-type="label" data-device="Anrufeabw" data-get="4-name"></div>
<div data-type="label" data-device="Anrufeabw" data-get="4-number"></div>
</div>
<div class="hbox items-space-between items-top">
<div data-type="label" data-device="Anrufeabw" data-get="5-timestamp"></div>
<div data-type="label" data-device="Anrufeabw" data-get="5-name"></div>
<div data-type="label" data-device="Anrufeabw" data-get="5-number"></div>
</div>
</div>


</li>
<li data-row="6" data-col="1" data-sizey="6" data-sizex="1" class="bg-black">
</li>
<li data-row="3" data-col="3" data-sizey="8" data-sizex="4" class="bg-black">

<div data-type="image" data-url="https://..........l.jpg" data-width="500" data-height="800" class="nocache"></div>

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

</html>

tomster · 13 Dezember 2018, 13:02:45

Hmm, aus dem Bauch raus würd ich sagen ändere Mal das data-sizex und setze class anstatt style (was eh falsch gesyntaxt ist):

Code Auswählen


<li data-row="5" data-col="1" data-sizey="1" data-sizex="1">
<div class="left-align large bold">Anrufliste</div>

--edit--

Ahh, jetzt komm ich mit. Du WILLST, dass dieses Element 2 Units breit ist, damit die Anrufliste Platz hat. Dann ist mein Ansatz natürlich Quatsch...
Yep, da kommt Dir wohl die Vbox in die (Achtung Wortwitz!) Quere .

Aber auch wenn ein left-align greifen würde dann rutscht das Wort Anrufliste ganz an den linken Rand. Das ist dann nicht mit dem Wetterausblick in einer Reihe untereinander...

Paul · 13 Dezember 2018, 15:16:26

Im Endeffekt sollte das wie auf dem Bild später mal ausschauen.

Oma hat dann ihren Enkel im Blick und ich etwas Fhem im Wohnzimmer

Wenn ich das so schreibe habe ich zwar das Anrufliste unter Wetterausblick steht, aber das Problem
mit der Liste.

Bewiesen ist aber das left-align keine Auswirkung hat, die Überschriften werden nur zentriert.

Wobei ich habe jetzt 3 verschiedene Browser und überall wird die Seite anders dargestellt.

Paul · 13 Dezember 2018, 16:14:20

Nach viel probieren habe ich es jetzt für mich vernünftig hinbekommen.
Besten Dank für die Hilfe.

Ich weiß gehört hier nicht hin, aber vielleicht kann mir einer sagen wie ich
aus Do, 13.Dez 2018 11:17:33 Do 11:17:33 bekomme.

SirMarco · 13 Dezember 2018, 19:53:02

Sollte im Device als Attribut funktionieren:

Code Auswählen

attr *DEVICE* time-format-string %a %H:%M:%S

Ist aber nicht getestet

Grüsse