Ergebnis 1 bis 19 von 19

Thema: Anpassung der Breite der Info-Blase

  1. #1
    Contao-Nutzer
    Registriert seit
    26.10.2011.
    Beiträge
    1

    Standard Anpassung der Breite der Info-Blase

    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
    Geändert von Sat (16.11.2011 um 18:25 Uhr) Grund: URL Änderunge

  2. #2
    Contao-Fan Avatar von fusch
    Registriert seit
    25.03.2012.
    Ort
    München
    Beiträge
    498
    Contao-Projekt unterstützen

    Support Contao

    Standard Besser spät als nie :-)

    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

  3. #3
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.914
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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?
    Grüsse
    Bernhard


  4. #4
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.632
    Partner-ID
    1081
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  5. #5
    Contao-Nutzer
    Registriert seit
    10.12.2013.
    Beiträge
    15

    Beitrag

    Hallo,

    bei mir hat folgendes gereicht:

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


    Gruß
    Harald

  6. #6
    Contao-Nutzer
    Registriert seit
    30.04.2010.
    Beiträge
    31
    Partner-ID
    xenbyte

    Standard

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

  7. #7
    Contao-Nutzer
    Registriert seit
    10.10.2013.
    Beiträge
    47

    Standard

    .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.

  8. #8
    Contao-Nutzer
    Registriert seit
    10.10.2013.
    Beiträge
    47

    Standard

    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
    }

  9. #9
    Contao-Nutzer
    Registriert seit
    10.10.2013.
    Beiträge
    47

    Standard

    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
    }

  10. #10
    Contao-Nutzer Avatar von contao100
    Registriert seit
    12.11.2013.
    Ort
    Bocholt
    Beiträge
    94

    Standard

    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.

  11. #11
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    844

    Standard

    Wenn es Dir ausreicht den inneren Bereich der Box auszudehnen versuch mal dieses z.B., das überschreibt den inline-style
    HTML-Code:
    .gm-style-iw[style] {width:200px !important; height:150px !important;}
    LG
    Bennie

  12. #12
    Contao-Nutzer Avatar von contao100
    Registriert seit
    12.11.2013.
    Ort
    Bocholt
    Beiträge
    94

    Standard

    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.

  13. #13
    Contao-Nutzer
    Registriert seit
    10.10.2013.
    Beiträge
    47

    Standard

    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...

  14. #14
    Contao-Nutzer
    Registriert seit
    17.10.2014.
    Beiträge
    3

    Standard

    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

  15. #15
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.138

    Standard

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

  16. #16
    Contao-Nutzer
    Registriert seit
    17.10.2014.
    Beiträge
    3

    Standard

    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

  17. #17
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.376
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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

  18. #18
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.138

    Standard

    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

  19. #19
    Contao-Nutzer Avatar von DetlefT
    Registriert seit
    25.07.2014.
    Ort
    Bedburg
    Beiträge
    104

    Standard

    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
    Viele Grüße, DetlefT

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •