Ergebnisfeld der Suche (Livesuche) linksbündig platzieren

Hey, ich versuche das Ergebnisfeld der Suche (Livesuche) nicht recht mit dem Suchfeld bündig darzustellen. sondern LINK. Jmd eine Idee wie ich das hinbekomme? Der Code wird so wie es aussieht direkt aus der AJAX showare.js erzeugt. Ich komme leider icht weiter… Hier ein Screen: Danke für eure Hilfe

Kann mir hier zu jmd helfen? Danke

[quote=„ottscho“]Kann mir hier zu jmd helfen? Danke[/quote] Die .js liest aber den Wert aus der plugins.css . Habe den Wert nicht im Kopf, aber es war was mit searchresult und dann der Offset „left“

Ja, left… Aber der Wert ist Dynamisch. Ändere ich die Fenstergröße, so ändert sich der Wert von left…

Das hat mich auch erst kräftig verwirrt. Ist aber letztlich logisch: Du trägst einen festen Wert ein und je nach Größe des Fensters berechnet das Javascript, wieviel “left” bis zur fixen Position übrig ist, um es immer an derselben Stelle anzuzeigen.

Okay, danke. Dann muss ich den Wert in der plugins.css suchen :wink:

Ca. Zeile 30 in der plugins.css: div#searchresults{........ left:

1 Like

Nein, das geht leider nicht. Ich habe den Wert nun in der plugin.css geändert. Leider ohne Erfolg. Der Code steht ja direkt im HTML Text: [code]

[/code] Ändere ich die Fenstergröße, so passt sich der left Wert an. Wo kann ich das ändern?

Noch jmd eine Idee?

[quote=“tschersich”][quote=“ottscho”]Kann mir hier zu jmd helfen? Danke[/quote] Die .js liest aber den Wert aus der plugins.css . Habe den Wert nicht im Kopf, aber es war was mit searchresult und dann der Offset “left”[/quote] Ja, genau so funktioniert es. Einfach diesen Wert verändern. Man sieht nur das Ergebnis nicht gleich im Browser. Ich kam darauf, weil ich es dann mit einem anderen Browser angeschaut habe, bzw. auch auf einem anderen Rechner. Also einfach den Browser komplett schließen, neu öffnen, und das Ergebnis ist zu sehen (Es nützt nichts, nur den Tab zu schließen…)

Hallo, man kann den CSS Schnippsel auch einfach in sein eigenes CSS geben. Ich habe zum Beispiel folgenden Code, ganz unten, in mein CSS gegeben: div#searchresults{ left: 694px !important; top: 94px !important; } Mir ist zwar klar, das mit !important zu arbeiten nicht die schönste Methode ist, aber meiner Meinung nach, schneller, besser und einfacher als direkt in die plugin.css zu schreiben. Denn beim nächsten Update, können die Änderungen sonst wieder verschwinden. LG Michael PS: Die Änderungen sind nach dem löschen des Caches und eines Reloads gleich aktuell. EDIT: Leider ist das Ergebnisfeld mit der Lösung von oben nicht mehr dynamisch. Den wert in der Plugin.css zu ändern hilft bei mir aber auch absolut nichts. Da ich die Ergebnisse weiter rechts brauche, arbeite ich nun einfach mit einem margin-left. Dabei bleibt das ganze dynamisch und ist dort wo ich es haben will. Wenn man es weiter links will ists problematischer. Man kann zwar mit margin-left: -xy; arbeiten, allerdings wird das nicht von allen Browsern unterstützt. Wenn inzwischen jemand eine noch bessere Lösung hat wäre ich ebenfalls dankbar.

Nach dem Javascript-File (jquery.shopware.js) wird die Positionierung wie folgt dynamisch ermittelt: liveSearch.css({ ‚left‘: containerOffset.left + config._left, ‚top‘: containerOffset.top + config._top }); containerOffset ist der Abstand vom Div mit der ID #wrapper zum linken bzw. oberen Rand des Browserfensters und passt sich immer dynamisch an. Wenn wir nun also wissen, dass unser Wrapper z.B. 1020px breit ist, und unser searchresults-Div beispielsweise 518px breit ist, so würde folgendes CSS die Suchergebnisse am rechten Rand des Shops anzeigen: div#searchresults { left: 502px; /*1020px-518px*/ } Hier das Beispiel für den linken Rand: div#searchresults { left: 0px; } Und hier ein Beispiel für die Anzeige in der Mitte (zentriert) des Shops: div#searchresults { left: 251px; /*(1020px-518px)/2*/ } Der Wert, der so per CSS gesetzt wird, wird nämlich im obigen Javascript-Code für die dynamische Berechnung der Position herangezogen (config._left enthält den CSS-Wert von left), somit gibt es auch keine Probleme beim Vergrößern oder Verkleinern des Browserfensters. Mit „top“ funktioniert das genauso. Absolute Angaben mit !important o.ä. zerstören die Funktionalität, da die Javascript-Berechnung nicht mehr greift.

1 Like