[V3.0 RC1.1] [CV 0.12 RC6] max_mobile_screen_width wird nicht berücksichtigt?

#1

Hallo,
für das Handy baue ich z.Zt. eine neue CV auf der Basis von Mqtt auf. Ich will in diese CV auch Werte von einer Homematic /RaspberryMatic Installation, Sonoff Schalter und Shelly i3 integrieren. Das funktioniert bisher ohne Probleme.
Für das Handy habe ich im PAGES Widget den Parameter "max_mobile_screen_width" auf 380 gesetzt und es sollen nur 4 Spalten möglich sein, Layout: colspan = (4,8,12). Das Plugin "Mobilemenu" benutze ich momentan nicht.
Leider funktioniert die Darstellung auf dem Handy nicht so wie gewünscht, sondern genau bei einer width von 600px wird das Design geändert:
Bei > 600 width:

width-gt-600.PNG

und bei kleiner als 600:

width-le-600.PNG

Ich habe aber in der Config keine 600px bzw. einen Wert gesetzt. Anbei die gesamte Testversion.

Ist es möglich, dass hier eine "mobile.css" zum Zuge kommt? Oder stimmt hier das Layout nicht?
VG
Albert

#2

Die max_mobile_screen_width gibt lediglich an unterhalb welcher Breite die mobile.css aktiviert wird. Die Schwellwerte ab wann die Unterschiedlichen Colspans benutzt werden sind nicht darüber einstellbar. Die sind hard-codiert und momentan nicht änderbar. Aber bei dem responsiven Layout bin ich auch nicht so im Thema, Da kann @Chris M. sicher mehr zu sagen ob/wie Dein Vorhaben damit umsetzbar ist.

#3

Ok, d.h. die 600 sind fest hinterlegt.
Habe eben gesehen: In der mobile.css ist fest definiert, dass eine width von 100% genommen wird.
Genau das soll aber verhindert werden, da ich ja max_mobile_screen_width auf 380 gesetzt habe.

#4

Also erstmal ist in der mobile.css noch ein "@media (max-width: 600px)" was raus muss, wenn das weg ist, werden die Regeln der mobile.css angewendet, wenn die Bildschirmbreite den in max_mobile_screen_width angegebenen Wert unterschreiten, ist keiner angegeben wird 600 als default-Wert genommen.

#5

Vielen Dank für deine prompte Antwort.
Wie du empfohlen hast, habe ich das @media (max-width: 600px)" rausgenommen, leider wird immer die 600px genommen. Da kann ich max_mobile_screen_width = 200 , 400 oder 800 setzen. Es wird immer 600 angenommen.
Kann ich das orginale mobile.css nicht überlagern ?
VG
Albert

#6

Ich glaube Du verwechselst da zwei Dinge, es gibt einmal die mobile.css die gewisse CSS Regeln unterhalb einer einstellbaren Bildschirmbreite anwendet und es gibt die Dinge die man innerhalb der Config bei den Widgets mit colspan-s und colspan-m angibt. Letzeres hast momentan hard-codierte Grenzen und die haben nichts mit der mobile.css und dem max_mobile_screen_width zu tun. Das sind zwei Dinge die nicht miteinander zusammenhängen.

Wenn Du das media... aus der mobile.css rausnimmst, dann gilt nur noch der Wert der über max_mobile_screen_width gesetzt wird. Im Quelltext der Seite im Browser kannst Du im <head>-Bereich sowas sehen

<link type="text/css" rel="stylesheet" href="../resource/designs/metal/mobile.css?1645557852610" media="screen and (max-width:599px)">

Die 599px sind der default Wert, bei Dir müsste dann das stehen was Du in max_mobile_screen_width eingetragen hast.

Nun zu den colspan-s und colspan-m Sachen, das hat erstmal nichts mit CSS zu tun, denn das wird über Javascript gemacht, d.h. je nach Breite des Briowserfensters wird da entweder der Wert von colspan, colspan-m oder colspan-s genommen. Das kannst Du nicht über CSS beeinflussen und hat daher auch nichts mit der mobile.css zu tun. Daher bringt es auch nichts diese zu überlagern.
Bei diesen Layout-Dingen liegt Grenze ab der colspan-s benutzt wird bei 599, fest einprogrammiert und momentan nicht änderbar über die Config.

Du kannst mal versuchen folgendes in die design_setup.js in resources/designs/metal einzutragen:

Code: Alles auswählen

cv.Config.maxScreenWidthColspanS=380;
cv.ui.layout.Manager.applyColumnWidths();

Aber ob das funktioniert kann ich nicht versprechen.

#7

Vielen Dank für die umfangreiche Erklärung der Zusammenhänge.
Ich habe die design_setup.js - wie vorgeschlagen- ergänzt sowie die mobile.css geändert und es funktioniert, das Layout wird nicht mehr abgeändert.
Damit passen jetzt die Spalten für das Handy perfekt!
Auch die mqtt-Anbindung für die CCU/RaspberryMatic funktioniert bisher für 15 Geräte (Anzeige, Schalten) ohne Probleme.

Ich bin begeistert vom tollen Support, den ihr da leistet!

LG
Albert

ElabNET Technik Forum

[Gelöst] [V3.0 RC1.1] [CV 0.12 RC6] max_mobile_screen_width wird nicht berücksichtigt?

[V3.0 RC1.1] [CV 0.12 RC6] max_mobile_screen_width wird nicht berücksichtigt?

Re: [V3.0 RC1.1] [CV 0.12 RC6] max_mobile_screen_width wird nicht berücksichtigt?

Re: [V3.0 RC1.1] [CV 0.12 RC6] max_mobile_screen_width wird nicht berücksichtigt?

Re: [V3.0 RC1.1] [CV 0.12 RC6] max_mobile_screen_width wird nicht berücksichtigt?

Re: [V3.0 RC1.1] [CV 0.12 RC6] max_mobile_screen_width wird nicht berücksichtigt?

Re: [V3.0 RC1.1] [CV 0.12 RC6] max_mobile_screen_width wird nicht berücksichtigt?

Re: [V3.0 RC1.1] [CV 0.12 RC6] max_mobile_screen_width wird nicht berücksichtigt?