google maps / Responsive

[tilda]

Guten Morgen,

ich möchte gerne, dass die Darstellung von google maps auch mobil gut sichtbar ist.
Leider funktioniert es nicht so ganz. Die Adresse, die in der Sprechblase sichtbar ist, liegt ganz weit rechts und ist nicht sichtbar, wenn man die Seite reinlädt.
Gibt es da einen Trick?

Beste GRüße
Tilda

[lucina]

Grundständig sollte das nach diesem Prinzip gehen: https://blog.kulturbanause.de/2012/1...ive-webdesign/

Ansonsten: Statisches Bild, das kann dei Googlemaps-Erweiterung ja auch.

[mlweb]

Oder sich mal die demos von rocksolid anschauen. Die haben das in Ihren Themes drin (konkret gesehen habe ich es in der Demo des Tao-Themes).

[Andreas]

Von zu Hause aus ist die dlh_googlemaps bereits responsive. Sie verkleinert sich und zentriert sich auf seinen Mittelpunkt. Desweiteren kannst du den Mittelpunkt verschieben oder einen Offset für die Infobox einstellen.

[tilda]

Bei mir verschiebt sich der Mittelpunkt leider nicht automatisch.
Was bedeutet offset für die Infobox einstellen?

[tilda]

Ich habe es jetzt folgendermaßen gelöst:

 @media only screen and
(min-width:320px) and (max-width:900px) and (orientation : landscape) {  
.dlh_googlemap {
width: 100% !important;
height: 200px !important; 
}
}

}

Vielen Dank für die Unterstützung.

[Andreas]

Bei mir verschiebt sich der Mittelpunkt leider nicht automatisch.
Was bedeutet offset für die Infobox einstellen?

Sprichst du von dlh_googlemaps? Dann hast du wahrscheinlich nicht die aktuelle Version. Hier ist der entsprechende Code.
https://github.com/delahaye/dlh_goog...tml5#L108-L113

Und so sieht es dann auf der Seite im Quellcode aus

google.maps.event.addDomListener(window, 'resize', function() {
    var center = gmap1.getCenter();

    google.maps.event.trigger(gmap1, 'resize');
    gmap1.setCenter(center);
}); 

Bei den Markern kannst du den Offset einstellen im Feld "Positions-Versatz der Infoblase".

[Andreas]

Vielleicht liegt es auch daran, dass ich noch ein wenig spezielles CSS für die Google-Map habe.

/* ... Googlemap responsive ...
 * 
 * set your map to pcnt 100 100
 * set your aspect ratio below
 * example: aspect ratio 16:9 => 9/16*100 = 56.25(%)
-------------------------------------------------------------------------------------------------*/
.ce_dlh_googlemaps {
  padding-bottom: 56.25%;
  position: relative;
}
.dlh_googlemap {
  position: absolute;
}
/* ... Googlemap responsive ... END
-------------------------------------------------------------------------------------------------*/ 

Somit braucht man auch keine Höhe anzugeben. Die Höhe ergibt sich aus der Breite. Das Seitenverhältnis bleibt immer gleich.

Edit: In Contao 3.5.30 mit Version 2.3.2 build 4 braucht man dieses CSS nicht mehr, es ist bereits on board (die Checkbox "CSS weglassen" hat damit nichts zu tun). Man kann mit der Option "Proportional" ein Seitenverhältnis für die Karte eingeben. Beispielsweise Breite=16 und Höhe=9. Ab wann das on board ist möchte ich jetzt nicht recherchieren.

[tilda]

Ja - damit geht es - vielen Dank!
Die Erweiterung bei mir ist aktuell gewesen!

[DetlefT]

Hallo Andreas,

ich habe jetzt nachgeschaut, die ce_dlh_googlemaps_default.html5 ist auf aktuellem Stand, das css habe ich genau wie von Dir beschrieben eingefügt, allerdinsg Breite und Höhe auf 98% gesetzt, damit die Map komplett dargestellt wird; 99% oder 100% ändern aber auch nichts am Problem: die Map hat keine Höhe.

Temporär anzuschauen unter: URL wieder entfernt
Bin irgendwie ratlos!

[Andreas]

Die Spezifität deines Selektors ist zu schwach. Das heißt:

.mod_article [class*="ce_"] {
  padding: 10px;
}

kannst du nicht mit

.ce_dlh_googlemaps {
  padding-bottom: 56.25%;
}

überschreiben, obwohl es nach der oberen Regel kommt. Versuche mal

.mod_article .ce_dlh_googlemaps {
  padding-bottom: 56.25%;
}

Hier kannst du die Stärke der Selektoren mal vergleichen https://specificity.keegan.st/. Trage oben und unten die beiden Selektoren ein, die du vergleichen möchtest (".mod_article [class*="ce_"]" und ".ce_dlh_googlemaps").

Arbeite dich in die Devtools (F12) ein, damit kannst du solche Sachen rausfinden.

Edit: Sorry, habe den Post hier bearbeitet, hier war noch Müll drin von Copy&Paste

[Andreas]

Wegen der 98%: Das sieht nicht gut aus. Scheint mir ein Behelf zu sein. Evtl. musst du der .ce_dlh_googlemaps box-sizing:border-box; geben, weil du ihr ein Padding und einen Border verpasst hast.

Ansonsten kann man solche Sachen auch mit

width: calc(100% - 22px);

korrigieren. Aber box-sizing ist besser.

98% o.ä. kannst du nur geben, wenn da auch ein Padding, oder Border mit 1% gesetzt wurde. Wobei Prozent bei Border überhaupt nicht geht.

CSS var: Ist ne schöne Sache, aber leider nicht allzu kompatibel - siehe hier http://caniuse.com/#feat=css-variables

[DetlefT]

Hallo Andreas,

ich habe jetzt eine Lösung, die rundherum zu funktionieren scheint. Breite und Höhe habe ich im Element auf 100% gesetzt und dazu folgende css:

.mod_article .ce_dlh_googlemaps {
	padding-bottom: 56.25%;
	position: relative;
}
.dlh_googlemap {
	border: 1px solid var(--par-parimalblau);
	border-radius: 10px;
	position: absolute;
	width: calc(100% - 22px) !important;
	height: calc(100% - 12px) !important;
}

Ohne !important bzw. mit box-sizing:border-box; erziele ich keine Wirkung.
Herzlichen Dank, dass Du mich auf's richtige Pferd gesetzt hast, calc kannte ich bisher noch gar nicht. Allerdings muss ich gestehen, dass ich den "Trick" mit dem %-padding-bottom noch nicht verstehe, da werde ich wohl mal büffeln müssen.

Die Variablen habe ich eingebaut, weil ich meinem Auftraggeber 3 verschiedene Farbvorschläge gemacht habe, die ich bei einer Präsentation schnell auswechseln wollte. Ehe die Website online geht, werde ich das mit replace noch austauschen. Eigentlich ein geniales Feature, dass hoffentlich noch bessere Implementation erfährt.

[Andreas]

Punkt 1: Es wäre besser, wenn du den einzelnen Inhaltselementen kein Padding gibst. Besser wäre es, wenn das .inside ein Padding bekäme, dafür ist es eigentlich da. Die vertikalen Abstände macht man dann mit den Margins der einzelnen CEs. Muss aber erstmal nicht sein.

Du hast hier aber einen Inhalt von einem CE (.dlh_googlemap IN .ce_dlh_googlemaps ), welcher 100% breit sein soll, und das ist halt die Breite vom Elternelement mit Padding, und es soll gleichzeitig nicht über das Padding hinausragen. Du wirst also auch mit anderen Elementen früher oder später einmal Probleme damit bekommen. Die Lösung mit width:calc() !important; ist korrekt, aber eigentlich überflüssig und auch nicht gut. Du kannst dein Padding und Border jetzt nur verändern, wenn du diesen Wert in calc() mit veränderst. Und !important ist auch immer nur ne Notlösung.

Punkt 2: Das width wird per JS dynamisch ins Element generiert

<div style="width:100%;">

Das ist Inline-Style und hat eine sehr hohe Specificity, welche nur noch mit !important ausgehebelt werden kann.

Punkt 3: Übrigens hattest du nicht die ganze Map gesehen, weil das Äußere Element ein Padding hat und dem position:absolute; dafür das left:0; fehlte. So hat es sich erstmal automatisch an das Padding angeheftet. Mit left:0; kannst du diese "Paddingschranke" überwinden und dich an den wirklichen Rand des Elternteils heften.

Punkt 4: Ja, dieses Paddingverhalten hatte ich glaube ich irgendwann mal beim flowplayer entdeckt und auch erst zwei bis viermal gestutzt. Das prozentuale vertikale Padding eines Elementes richtet sich nach seiner Breite!? Beispiel: Ein Element ist 960px breit hat keinen Inhalt und ist somit erstmal 0px hoch. Vergibt man jetzt padding-bottom:50%; dann hat dieses Element ein Padding unten von 480px, welches das Element auf 960x480px aufzieht. Bei der Googlemap befindet sich die eigenliche Map in diesem Element und wenn sie width und height 100% bekommt füllt sie dieses Element aus. Eine schöne Methode um eine Leinwand mit einem bestimmten Seitenverhältnis bereitzustellen. Eine Höhe von sagen wir mal 50% nützt ja meistens nichts. 50% wovon? Vom Elternelement! Aber die haben ja eigentlich nie eine feste Höhe. - Der Umgang mit Höhen ist mit CSS sehr viel schwieriger als der Umgang mit Breiten.

[DetlefT]

Bisher war mir Dein "Vorwurf" mit dem vergebenen padding völlig unklar, da ich mir keiner Schuld bewusst war. Ähm, nun ja, **räusper**

Ich habe den Übeltäter wohl ausfindig gemacht:

/*********************************************************************************/
/* Add a default padding to all content elements, so they align with the floatet */
/* ones (otherwise you would have to add "grid12" to every element)              */
/*********************************************************************************/
.mod_article *[class*="ce_"],
.mod_article *[class*="mod_"] {
	padding:10px;
}

Ich weiß gar nicht mehr, woher ich das habe, ich glaube, aus der grid-css; grids nutze ich aber gar nicht mehr.
Bisher habe ich meine css-Kenntnisse eigentlich immer im mittleren Drittel angesiedelt - ich glaube, ich muss das noch mal neu bewerten (Richtung nach unten)

[Andreas]

Mach einfach das Padding auf die .insides und vergebe dann diverse Margins nach unten. Z.B.
das weg

#main > div {
	margin-left: 33px;
	margin-right: 25px;
}
.mod_article [class*="ce_"], 
.mod_article [class*="mod_"] {
	padding: 10px;
}

und das hier dazu

#main .inside {
	padding: 20px 40px;
}
[class^="ce_"],
[class^="mod_"] {
	margin-bottom: 40px;
}
[class^="ce_"]:last-child {
	margin-bottom: 0;
}

Mal so als Ausgangspunkt. Aber ich kenne natürlich dein Grid-System nicht.

So schlecht sieht das CSS ja auch gar nicht aus. Nur mit CSS-Variablen würde ich nicht arbeiten.

[Andreas]

Habe #8 geändert, weil das responsive CSS mit Einstellmöglichkeit für ein Seitenverhältnis jetzt on board ist.