Anpassung der Breite der Info-Blase

[Sat]

Guten Abend,

versuche gerade die Google Maps Karte in unsere Webseite einzubinden.
Funktioniert soweit, nur dass die Infoblase viel zu breit ist und ich keine
Möglichkeit gefunden habe das zu formatieren.

Die Breite ist - wenn ich die Option "Routenplaner verwenden" aktiviere
bei 688px - keine Ahnung wo das herkommt.


neue URL die Seite ist jetzt online:
http://www.satservicegmbh.de/de/firma/anfahrt.html



Versionen:
contao: 2.9.5
dlh_googlemaps: 1.1.0 stable

Vielen Dank !
Vanessa

[fusch]

Liebe Forumsleser,

da ich bei der Suche nach den passenden Selektoren zur Formatierung der Infoblase auch auf den vorherigen Post gestoßen bin und meine Lösung dann selbst gefunden habe, möchte ich sie gerne hier teilen, vielleicht hilft es ja jemandem weiter.

Mit diesem CSS habe ich es für meine Zwecke hinbekommen:

.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
font-size: 12px;
}
.gm-style > div > div > div > div div {
height: 160px;
width: 180px;
}
.gm-style-iw div {
overflow: hidden !important;
}

Ist bestimmt an der einen oder anderen Stelle noch verbesserungswürdig.

Viele Grüße,
Hella

[derRenner]

Hallo,

ich bin auch schon den ganzen Abend dran die korrekten Selectoren für die Infoblase zu finden ... bin aber daran gescheitert. Leider auch durch dein "rettendes" post. Deine Angaben bewirken bei mir nur einen Scrollbalken in der Sprechblase. Ich finde einfach nicht die passenden Selektoren. Wo muss ich ansetzen?

[do_while]

Hallo Bernhard,

bei mir haben die 3 CSS-Einträge gut funktioniert. Die Breite und die Höhe musst Du natürlich dann an Deine Gegebenheiten anpassen.

[kluckit]

Hallo,

bei mir hat folgendes gereicht:

div.gm-style-iw {
width:250px;
height:150px;
}


Gruß
Harald

[av3nger]

Vielen Dank, diese simple CSS-Anpassung hat bei mir auch schon ausgereicht.

[462]

.gm-style-iw

beschreibt leider nur das "kundenspezifische" Innere der Infoblase. Es bleibt der Rahmen drumrum und alle möglichen div's für Schatten und anderes. Für die Größeneinstellung ist das soweit ok.

.gm-style > div:first-child > div:first-child > div:first-child + div + div > div:first-child + div + div > div {
opacity:0.8
}

hilft weiter, wenn man die Blasen z. B. halbdurchsichtig haben will. Man muss sich leider von oben nach unten durchhangeln und hoffentlich ändert Google das nicht sobald.

[462]

Mit der aktuellen v2.0.9 (oder früher) ist google-maps etwas verändert. Nun gilt für die komplette Infoblase:

.gm-style > div:first-child > div:first-child > div:first-child + div + div + div + div + div + div > div {
opacity:0.8
}

[462]

Google-maps ist wieder etwas anders

.gm-style > div:first-child > div:first-child + div + div > div:first-child + div + div + div > div {
opacity:0.8
}

[contao100]

Bin gerade auch auf der Suche nach dem korrekten Selektor zur Änderung der Breite und Höhe der Infobox.

Die geposteten Lösungansätze funktionieren nicht.

[Bennie]

Wenn es Dir ausreicht den inneren Bereich der Box auszudehnen versuch mal dieses z.B., das überschreibt den inline-style

.gm-style-iw[style] {width:200px !important; height:150px !important;}

LG
Bennie

[contao100]

Vielen Dank für den Tip!

Allerdings soll die Maps-Karte mobil eingebunden werden. Daher muss ich die äußere Box in der Breite und in der Höhe ändern.

[462]

Ich habe gerade mal nachgesehen. Es sind mehrere DIVs, die einzeln angepasst werden müssen, da diese alle absolute und inline erzeugt werden.

Die Breite und linke Position des "Hintergrundfensters" mit dem X zum Schließen (das ist das, was ich transparent mache und sich so einfach auf alle "Unterfenster" vererbt):

.gm-style > div:first-child > div:first-child + div + div > div:first-child + div + div + div > div {
width:
left:
}

Alle untergeordneten DIVs müssen nun der Reihe nach einzeln angepasst werden, da teils die Breite und teils die linke Position geändert werden muss.

Die Position des "Zipfelhintergrunds" unten am Fenster:

.gm-style > div:first-child > div:first-child + div + div > div:first-child + div + div + div > div > div:first-child > div:first-child > div:first-child {
left:
}

Die Breite eines über dem "Hintergrund" liegenden Fensters (was wohl den Rand macht):

.gm-style > div:first-child > div:first-child + div + div > div:first-child + div + div + div > div > div:first-child > div:first-child + div {
width:
}

Die Position des "Zipfels" unten am Fenster:

.gm-style > div:first-child > div:first-child + div + div > div:first-child + div + div + div > div > div:first-child > div:first-child + div + div {
left:
}

Die Breite eines weiteren darüberliegenden Fensters (was wohl die Hintergrundfarbe bestimmt):

.gm-style > div:first-child > div:first-child + div + div > div:first-child + div + div + div > div > div:first-child > div:first-child + div + div + div {
width:
}

Die Breite des inneren, eigentlichen Fensterinhalts, wie bereits oben angegeben:

.gm-style-iw {
width:
}

Ist doch gar nicht so schlimm...

[furschlage]

guten abend in die runde,

mich würde ja mal interessieren, in welcher datei ihr die änderungen gemacht habe. ich bin leider blutiger contao anfänger und quäle mich nun schon seit tagen mit diesem scroll bar problem rum. es ist echt haarsträubend.

um euch das problem mal zu verdeutlichen hier ein link.

http://fur-wickeltechnologie.de/de/anfahrt.html

vielleicht kann mir einer von euch mal auf die sprünge helfen, da ich die erweiterung an sich ja super finde.

mfg

steffen

[magicsepp]

Hallo steffen,
das ist doch ein css Thema und in deinem Fall hängt das mit der Breite von input[type="text"] zusammen.

[furschlage]

also wenn du mir n ansatz geben würdest in welcher datei ich gucken muss, sag ich meinem bruder bescheid, dass der da mal rein guckt. der ist php back ender und hat echt ahnung. nur wenn er rein guckt, will ich ihn nicht lange suchen lassen. danke schon mal.

mfg

steffen

[lucina]

Ich verstehe gerade nicht was Ihr da macht ... ;-)

Die Optionen sind doch alle via Maps-Api ansprechbar - insofern wäre doch eher der Weg, die Parameter mit dem dlh_googlemaps-Modul mitzugeben anstatt hinterher CSS-Hacks anzuwenden.

Tipp zum Weiterlesen: https://developers.google.com/maps/d...=de#MapOptions

[magicsepp]

Carolina,
es geht nur um ein scroll bar problem und dafür ist und bleibt meiner Meinung nach css die richtige Wahl!
Das ist doch auch von den Optionen unabhängig, oder ich ahb auch was falsch verstanden

[DetlefT]

Hallo,

versuche es mal hiermit:

div.routinglink form input.text {width:200px;}
oder:
div.routinglink form input.text {width:auto;}

getestet in FF 33.1.1