Ich habe ein Problem mit der Formatierung einer vbox... Mir gelingt es einfach nicht diese in der Höhe vernünftig hinzubekommen.
Ich habe so einiges mit den CSS Klassen probiert (top-narrow, items-top usw.) aber nichts funktioniert.
Das Problem ist auf dem Firefox sieht das alles OK aus sieh Screenshot aber unter Android geht da nichts, evtl. sieht jemand was ich machen kann, denn ich komme absolut nicht weiter.
Ich habe die eine "hbox" mal rot umrandet damit man sieht wie hoch die unter Android ist und wie weit er z.B. die Blaue untere Leiste nach unten schiebt, so das sie gar nicht mehr zu sehen ist.
Firefox zeigt das alles wunderbar an.
Screenshot 1
Android:
Screenshot 2
Hier mal der Coder der Boxen:
<li data-row="12" data-col="11" data-sizex="6" data-sizey="5" style="background-color:#1f222e">
<div class="vbox grow-1 border-bottom-blue1" style="width:98%; background-color:#1f222e">
<div class="hbox items-center">
<div class="card grow-0"><div style="margin-left:10px; font-size:140%; color:#1f222e">Tankstelle</div></div>
<div class="card"><div data-type="image" data-url="../tablet/images/star.png" data-size="55"></div></div>
<div class="card"><div data-type="image" data-url="../tablet/images/famila.png" data-size="50"></div></div>
<div class="card"><div data-type="image" data-url="../tablet/images/real.png" data-size="50"></div></div>
<div class="card"><div data-type="image" data-url="../tablet/images/hem.png" data-size="50"></div></div>
</div>
<div class="vbox grow-0">
<div class="hbox border-crimson">
<div class="card grow-0"><div style="margin-left:10px; font-size:140%">Dieselpreis</div></div>
<div class="card grow-1"><div style="font-size:150%" data-type="label" data-device="Star" data-get="Diesel" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
<div class="card grow-1"><div style="font-size:150%" data-type="label" data-device="Famila" data-get="Diesel" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
<div class="card grow-1"><div style="font-size:150%" data-type="label" data-device="Real" data-get="Diesel" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
<div class="card grow-1"><div style="font-size:150%" data-type="label" data-device="HEM" data-get="Diesel" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
</div>
<div class="hbox">
<div class="card grow-0"><div style="margin-left:10px; font-size:140%">Benzinpreis</div></div>
<div class="card grow-1"><div style="font-size:150%" data-type="label" data-device="Star" data-get="SuperE5" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
<div class="card grow-1"><div style="font-size:150%" data-type="label" data-device="Famila" data-get="SuperE5" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
<div class="card grow-1"><div style="font-size:150%" data-type="label" data-device="Real" data-get="SuperE5" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
<div class="card grow-1"><div style="font-size:150%" data-type="label" data-device="HEM" data-get="SuperE5" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
</div>
</div>
</div>
</li>
Ich weiß leider nicht, welcher Screenshot woher kommt. Aber beim oberen scheint noch mehr nicht zu stimmen. Das fängt schon bei der anderen Schrift an. Mir scheint, da wird einen CSS-Datei ignoriert. Kann das sein?
Der obere Screenshot ist vom Firefox, da ist aber alles OK.. d.h. Hier passen die Abstände und die Schrift ist nur etwas größer gemacht.
Du meinst im Vergleich zu der unteren Schrift..?
Mir geht es ja hauptsächlich um das verschieben der gesamten Box nach unten.
Auf dem Tablet ist in den anderen Boxen alles Ok nur eben in dieser ist irgendwas schief gelaufen und ich frage mich warum der Unterschied zum Firefox so gravierend ist.
Das ist eine komplett andere Schriftart. Und deshalb die Vermutung, dass Firefox etwas ignoriert. Etwas, das auch die Größen der Boxen bestimmt. Ich sage also, auf Android ist's richtig, in Firefox nicht. ;)
Was mir als erstes ins Auge fällt sind die fehlenden Semikolons in deinen
style attributen. Der letzte CSS Befehl wird nicht abgeschlossen:
- style="background-color:#1f222e;"
- style="width:98%; background-color:#1f222e;"
- style="margin-left:10px; font-size:140%; color:#1f222e;"
- usw
Der FF ist da möglicherweise etwas Strikter....
Zitat von: yersinia am 27 März 2019, 10:24:00
Was mir als erstes ins Auge fällt sind die fehlenden Semikolons in deinen style attributen. Der letzte CSS Befehl wird nicht abgeschlossen:
Nein, dass braucht es in der HTML Datei nicht, da es ja in CSS hinterlegt ist.
Das Semikolon arbeitet hier nur als Trennzeichen, da es immer die letzten Style Attribute sind braucht es demnach am Ende kein Semikolon...
Bin ich mir fast sicher ;)
Habe es aber dennoch ausprobiert und es ändert sich leider nichts..!
Ich arbeite aber weiter, weil das CSS Thema ist ja immer wieder mal hier ein Problem, wenn ich eine Lösung habe werde ich sie hier sofort bereit stellen, hilft ja immer ;)
Danke weiterhin für die Mithilfe
Drück mal bei geöffneter FTUI-Seite im Firefox auf F12, geh dort auf den Tab "Network" und dann mach mit STRG+F5 mal einen Reload der Seite. Und dann schau nach, ob in der Spalte "Status" eh alles auf 200 oder 304 steht.
du meinst sicher Netzwerkanalyse
Ich habe einmal 304 - jquery.min.js
dann 3x 304 bei - Icons sind auch zwei meiner Tankstellen Icons dabei
2x 101 in blau - websocket
Der Rest ist grün
Tja, puh, jetzt hab ich leider auch keine schlaue Idee mehr. Dein HTML-Code stimmt soweit. Glaube daher trotzdem, dass es irgendwas mit (fehlendem) CSS zu tun hat. Aber die Ferndiagnose ist in dem Fall leider schwierig.
ich habe das jetzt nochmals gemacht nun gibt es nur noch ein blaues - websocket, der Rest ist grün. ;)
Ok, vielen lieben Dank ich arbeite eben gerade an einer weiteren Variante, ich stelle sie bereit wenn es fertig ist, denn ich finde den Fehler auch nicht und ganz so doof bin ich in HTML und CSS nicht :D ;)
Das muss doch hinzukriegen sein... :-\
So ich habe jetzt eine Variante die halbwegs passt..!
Ich hätte zwar gern die Icons etwas größer, aber so geht es.
Nicht wundern im angehängten Code sind verschiedene Varianten für die Größe der Icons hinterlegt weil ich am ausprobieren bin was da besser geht... Deshalb sind sie auch etwas unterschiedlich von der Größe her..! ;)
Mein Wunsch wäre es wenn die unteren beiden Zeilen noch etwas weiter zusammen rutschen würden, aber das probiere ich noch. Zumindest sieht es erst mal OK aus.
Anbei also zwei Screenshots, einmal FF und einmal Android mit Fully
1. Screenshot - FF
2. Screenshot - Fully auf Android
Code FTUI
<li data-row="12" data-col="11" data-sizex="6" data-sizey="5" style="background-color:#1f222e">
<div class="vbox border-bottom-blue1" style="width:98%; background-color:#1f222e">
<div class="hbox">
<div class="card items-center"></div>
<div class="card items-center"><div style="margin-top:0px; width:85%" data-type="image" data-url="../tablet/images/star.png"></div></div>
<div class="card items-center"><div data-type="image" data-url="../tablet/images/famila.png" data-size="70"></div></div>
<div class="card items-center"><div data-type="image" data-url="../tablet/images/real.png" data-size="80"></div></div>
<div class="card items-center"><div data-type="image" data-url="../tablet/images/hem.png" data-size="75"></div></div>
</div>
<div class="hbox">
<div class="card grow-1"><div style="margin-left:5px; margin-top:0px; font-size:120%; color:#ffffff">Dieselpreis</div></div>
<div class="card grow-1"><div style="font-size:130%" data-type="label" data-device="Star" data-get="Diesel" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
<div class="card grow-1"><div style="font-size:130%" data-type="label" data-device="Famila" data-get="Diesel" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
<div class="card grow-1"><div style="font-size:130%" data-type="label" data-device="Real" data-get="Diesel" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
<div class="card grow-1"><div style="font-size:130%" data-type="label" data-device="HEM" data-get="Diesel" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
</div>
<div class="hbox border-top-gray1">
<div class="card"><div style="margin-left:5px; margin-top:0px; font-size:120%; color:#ffffff">Benzinpreis</div></div>
<div class="card"><div style="font-size:130%" data-type="label" data-device="Star" data-get="SuperE5" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
<div class="card"><div style="font-size:130%" data-type="label" data-device="Famila" data-get="SuperE5" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
<div class="card"><div style="font-size:130%" data-type="label" data-device="Real" data-get="SuperE5" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
<div class="card"><div style="font-size:130%" data-type="label" data-device="HEM" data-get="SuperE5" data-limits='["0","1.30","1.50"]' data-colors='["#00FA9A","#aa6900","firebrick"]' data-unit="9 €"></div></div>
</div>
</div>
</li>
Zitat von: moonsorrox am 27 März 2019, 13:52:10
Nein, dass braucht es in der HTML Datei nicht, da es ja in CSS hinterlegt ist.
Das Semikolon arbeitet hier nur als Trennzeichen, da es immer die letzten Style Attribute sind braucht es demnach am Ende kein Semikolon...
Bin ich mir fast sicher ;)
AFAIK nope: https://www.w3schools.com/html/html_css.asp
MWn schließt das Semikolon das CSS Attribut/Befehl ab. So auch im inline CSS.
Möglicherweise liegt es schon daran, dass es uneinheitlich aussieht.
OK, bei denen sieht es tatsächlich so aus als wenn es gebraucht wird :-\
Ich habe das bisher immer "ohne" in der separaten style Anweisung in der html Datei gemacht.
Vllt. sollte ich da mal konsequent alles durch suchen und verändern, also alles mit Semikolon machen.!
Zitat von: moonsorrox am 27 März 2019, 14:55:07
OK, bei denen sieht es tatsächlich so aus als wenn es gebraucht wird :-\
Ich habe das bisher immer "ohne" in der separaten style Anweisung in der html Datei gemacht.
Vllt. sollte ich da mal konsequent alles durch suchen und verändern, also alles mit Semikolon machen.!
Ja, mach das. Weil dies ist formal korrekt. Und wenn der Frickelfox strikt ist, dann ignoriert er die fehlerhaften CSS. Ggf ist das Android da etwas kulanter.
Analog zu
Zitat von: drhirn am 27 März 2019, 13:56:29
Drück mal bei geöffneter FTUI-Seite im Firefox auf F12, geh dort auf den Tab "Network" und dann mach mit STRG+F5 mal einen Reload der Seite. Und dann schau nach, ob in der Spalte "Status" eh alles auf 200 oder 304 steht.
gibt es auch einen Tab Inspector, damit kannst du durch das generierte (!) HTML durchhangeln und siehst, welche Styles sich ziehen und was das Element vererbt bekommt (rechts bei Rules) - und was der FF verwirft. Weiterhin gibt es einen Tab Style Editor.
Edit:
Zitat von: moonsorrox am 27 März 2019, 14:55:07
Vllt. sollte ich da mal konsequent alles durch suchen und verändern, also alles mit Semikolon machen.!
Ggf ist es sinnvoller, sich in der ftui_custom.css eigene Klassen aufzumachen. Wenn du mal was ändern musst/möchtest, musst du viel anfassen innerhalb der html tags. Mit einer eigenen CSS definition kannst du das eleganter gestalten.
Hast du eigentlich anstelle von
style="font-size:130%"mal
class="big"probiert?
(=> https://wiki.fhem.de/wiki/FHEM_Tablet_UI#CSS-Klassen)
Zitat von: yersinia am 27 März 2019, 14:59:38
Ja, mach das. Weil dies ist formal korrekt. Und wenn der Frickelfox strikt ist, dann ignoriert er die fehlerhaften CSS. Ggf ist das Android da etwas kulanter.
Analog zugibt es auch einen Tab Inspector, damit kannst du durch das generierte (!) HTML durchhangeln und siehst, welche Styles sich ziehen und was das Element vererbt bekommt (rechts bei Rules) - und was der FF verwirft. Weiterhin gibt es einen Tab Style Editor.
damit arbeite ich auch, wenn ich Fehler suche, nur oft sieht man da echt nicht mehr durch mit der ganzen Vererbungs Geschichte ;)
In dem Fall wär die "Vererbungs-Geschichte" aber eigentlich der interessante Punkt ;)
Zitat von: moonsorrox am 27 März 2019, 15:02:56
damit arbeite ich auch, wenn ich Fehler suche, nur oft sieht man da echt nicht mehr durch mit der ganzen Vererbungs Geschichte ;)
Das coole ist, dass man rechts im Fenster unter Regeln die CSS aktiv zur Laufzeit (und temporär) manipulieren kann....damit kann man etwas spielen. ;)
Ja das mache ich auch ab und an so, nur eben wenn ich extreme Formatierungsprobleme habe..! ;)
Ich werde jetzt mal konsequent meine Styles durch gehen, bisher habe ich zwei html Seiten gemacht, aber verändert hat sich zum Glück nichts... ;)
Wenn das so sein muss ist es in jedem Fall natürlich ratsam, ich lasse mich da gerne belehren, vielen Dank für das rauf stupsen. :D
Zitat von: yersinia am 27 März 2019, 14:59:38
Hast du eigentlich anstelle von
style="font-size:130%"
mal
class="big"
probiert?
(=> https://wiki.fhem.de/wiki/FHEM_Tablet_UI#CSS-Klassen)
ja das habe ich eigentlich immer in einem Tab offen um nach zu schauen, aber oft passt die Größe nicht ganz so wie ich es möchte ;)