caroufredsel responsive macht Probleme mit der Höhe

**Marchie** · 23.07.2014, 10:25

Hallo zusammen,

ich habe den caroufredsel nun schon zum zweiten Mal eingesetzt und finde die erweiterung generell echt super und total vielseitig. Aber ich habe jedesmal Probleme mit der responsiven Version. Und zwar bleibt die Höhe des Container immer gleich hoch sodass bei sobald ein Breakpoint greift, die Elemente darunter einen Abstand bekommen. Bei zwei Breakpoints könnte ich das noch evtl. noch abfangen mit festen Werten (hab ich zwar noch nicht versucht - müsste aber gehen) aber beim kleinsten Viewport skaliert sich das Bild ja ständig und sollte sich die Höhe doch bitteschön anpassen - tut sie aber nicht.

Ich habe hier im Forum einiges gelesen, ich bin wohl nicht die Einzige, aber eine finale Lösung die auch bei mir greift, hab ich nicht gefunden. Ich habe nun schon alles mögliche in den Einstellungen versucht. Im schlimmsten Fall ist der slider komplett weg. Alle Sliderbilder sind gleich groß und ich habe nun folgende Einstellungen mal gelassen:

Größe des Karussells:
Breite flüssig - 100%
Höhe: variabel

Größe der Elemente:
nichts definiert

Anzahl sichtbarer Elemente:
min/max

Der Link ist folgendender:

http://entwicklung.sela-messebau.de/

Hat jemand noch ne Idee???

Danke schon mal im Vorraus! LG, Marchie

**Dirch** · 24.07.2014, 11:25

Hallo Marchie,

du solltest die Element-Höhe auf "variabel" einstellen, dann sollte es gehen. Evtl. noch zusätzlich, daß nur 1 Bild gleichzeitig sichtbar sein soll.

Viele Grüße...
...Dirk

**Marchie** · 24.07.2014, 14:58

Hallo Dirch,

danke für deinen Hinweis. Ich habe deine Angaben mal eingesetzt, aber leider bringt mich das Ding noch immer zum Verzweifeln. Habe wirklich schon alle Kombinationen in den Einstellungen versucht. Anbei mal zwei Screens.

Beim ersten mit deinen Angaben - Elementhöhe variabel, Anzahl gleichzeitig sichtbare Elemente 1 und die Höhe des Karussells fest 465px. Dann passt es in der Screenansicht, aber diese Höhe behält er auch bei, wenn der Viewport kleiner wird. Siehe Screenshot 1

Mach ich aber das Karussell ebenfalls in der Höhe variabel oder automatisch, dann stimmt es in der Screenansicht nicht und in allen anderen Breakpoints, außer im kleinsten Viewport. Außerdem kommt beim ersten Laden der Seite dann nur ein schmaler Streifen für den Slider. Erst beim Reload wird der Slider komplett angezeigt. Siehe Screenshot 2.

sliderproblem_responsive1.jpg
sliderproblem_responsive2.jpg

Ich habe natürlich auch bereits versucht, die Höhen im Stylesheet zu verändern, aber das greift natürlicht nicht, auch nicht mit !important, da er immer was eigenes ins Element reinschreibt. Es ist zum Mäusemelken. Hat jemand noch ne Idee?

Sonnige Grüße Marchie

**pipkin** · 12.08.2014, 12:48

Hallo zusammen,

ich hatte bis eben ein ähnliches Problem und wollte mich gerade als Leidensgenossin anhängen. Und wie das so ist: plötzlich ging es dann.

Ich wollte erreichen, dass sich der Caroufredsel flüssig der Breite anpasst. Das Problem war, dass die Inhalte unter dem Caroufredsel nicht mit nach oben rutschten und dadurch eine Lücke entstand. Auch wenn ich sämtliche Einstellungen auf "Variabel" gestellt hatte oder sogar auf gar nichts (-), stand im "element style" des "caroufredsel_wrapper" immer eine sture height von 351px. Das ist die Höhe des JPGs, das geladen wird. Nur - wo kam der Wert her?!... Er stand ja nirgendwo mehr in den Einstellungen. Ich dachte, vielleicht wird der automatisch aus dem Bild gelesen und dann hinterlegt... andererseits jedoch... sehr merkwürdig.

Jedenfalls wollte ich hier gerade runterschreiben, bei welchen Einstellungen es bei mir zu komischen Seiteneffekten kommt, als ich alles noch einmal durch ging. Als ich dabei in den Einstellungen bei Größe der Elemente/ Art der Höhe einmal wieder auf flüssig ging, öffnete sich das zweite Einstellungsfeld, und dort stand schon ein Wert drin (von den Einstellungsversuchen davor vermutlich), nämlich 351. Ob sich der Wert irgendwo festgefressen hat...?
Ich habe den Wert dann rausgelöscht und danach gespeichert. Und dann noch einmal auf variabel gestellt und gespeichert.

Und siehe da: jetzt funktioniert alles.

Meine Einstellungen:

Größe Karussel
Breite: 100% flüssig
Höhe: -

Größe Elemente
Breite: -
Höhe: Variabel

Responsive: ja

Anzahl Elemente fest (1)

Ich hoffe, es hilft jemandem ;-)

**Dirch** · 12.08.2014, 15:29

Eigentlich werden/sollten nur die Werte, der aktiven Einstellungen an das Frontend weiter gereicht werden. Dieser Teil ist seit langem relativ unverändert implementiert, weshalb ich da eher auf ein "Verschlucken" oder den Cache tippen würde. Sonst wären da wahrscheinlich viele viele Meldungen gekommen.

Dennoch freut es mich, daß es nun bei dir klappt.

**pipkin** · 12.08.2014, 16:57

Ich habe mich auch gefreut ;-)

Wobei ich leider gleich ein zweites Problem habe.

Wenn ich die Seite neu lade inkl. Browsercache leeren, ist der Caroufredsel nicht mehr zu sehen. Im Quellcode/ Css steht dann, dass er eine height von 0 hat.

Auf dem lokalen Server (Mamp) bekomme ich das nicht reproduziert. Erst seitdem es auf einem "echten" Server liegt, tritt das Problem auf.

Beim normalen Aktualisieren ist alles ok. Nur beim Neu Laden mit Cache leeren verschwindet der Caroufredsel. Wenn ich danach am Browserfenster ziehe oder auf Aktualisieren klicke, ist er wieder da.

Was mag das sein?! Ladereihenfolge...?

**pipkin** · 12.08.2014, 17:42

Aaahhh... schon gefunden ;-)
Einstellungen -> Caroufredsel -> readyLoad ;-)

**Dirch** · 12.08.2014, 18:16

Das sind die Webkit-Browser, die bei noch nicht geladenen Bildern eine Höhe von 0 liefern. Daraus kann dann natürlich kein Script etwas ordentliches machen. Manche starten die Scripts dann erst bei window.load was aber nicht wirklich gut ist. Wenn man einen Bild-Slider hat (statt einen Inhalts-Slider), dann stellt man das auf dieses ready.load um was den Slider einfach mehrmals initialisiert. Ist zwar auch nciht soo toll, aber ein funktionierender Kompromis.

**pipkin** · 14.08.2014, 11:50

Verstehe...

Bin auch gerade dabei, die verschiedenen Einstellungen zum Verhalten bei Größenänderung des Fensters (throttle und debouce) zu testen.

Wenn ich am Fenster ziehe, springt die Seite nämlich immer nach oben, was bei längeren Inhalten sehr mehrwürdig anmutet. So ähnlich benimmt es sich auch bei dem Beispiel oben von Marchie (http://entwicklung.sela-messebau.de/). Z.B. wenn man in einem Browserfenster ungefähr eine sichbare Höhe von 800 Pixel hat und dann ganz runterscrollt - und dann am Browserfenster zieht, springt in diesem Fall der Inhalt hoch (ungefähr bis zur Mitte). Bei mir springt er fast bis ganz nach oben.

Bei "Throttle" macht es keinen Unterschied, bei "Bounce" springt es in zwei Stufen und etwas verzögert - ist am Ende aber dasselbe Problem.

Wenn ich den Caroufredsel deaktiviere, verhält sich die Seite ganz normal, dito die Seite von Marchie (hab via Firebug den "#slider-startseite" auf display:none gestellt).

Was zuckelt da bei onWindowonResize? ;-)

Gibt's da einen Trick, das irgendwie abzuklemmen?

**pipkin** · 18.08.2014, 19:04

Inzwischen habe ich das Problem an verschiedenen Websites reproduziert bzw. an- und abschalten können.
Immer wenn "responsive" an ist und/oder die Karussell-Breite auf "fluid" steht, verspringt der Seitenhinhalt beim Fensterziehen (bei heruntergescrolltem Seitenhinhalt) nach oben zur Mitte oder ganz nach oben.

Bei anderen Einstellungen scheint beim Fensterziehen die Breite nicht neu berechnet zu werden. Daher denke ich mir, dass das Gespringe damit im Zusammenhang steht.

Es ist übrigens in FF und Safari identisches Phänomen - andere habe ich noch nicht getestet.

Kommt man da mit Bugfixes weiter zum Thema Window-Resize-Bug oder ähnliches..?

Ratlos ...

Nachtrag:
Problem ist zu sehen beim Caroufredsel bei Dev7Studios..
http://demo.dev7studios.com/caroufredsel/

Der Rocksolid-Slder hat offenbar dasselbe Problem:
http://rocksolidthemes.com/de/contao...-slider-demo-5

Der Revolution-Slider nicht:
http://preview.premium-contao-themes...er-slider.html

Der Content-Slider auch nicht...
http://themes.contao.org/de/preview/easy-focus.html

**RockSolid Themes** · 19.08.2014, 11:12

Danke für den Hinweis pipkin.

Beim RockSolid Slider tritt der Fehler nur auf wenn die Höhe auf 'css' gesetzt ist. Dazu gibt es jetzt ein Ticket auf GitHub: madeyourday/rocksolid-slider#18

In der Slider-Demo haben wir das Problem gelöst indem wir die Höhe auf 'auto' gesetzt haben.

**pipkin** · 19.08.2014, 12:36

Interessant!

Beim Caroufredsel wird die (laufend berechnete) Höhe leider ständig ins Element geschrieben.
Da kann ich wohl mit CSS nicht viel dran manipulieren.., oder?

**Dirch** · 19.08.2014, 12:46

Ich schau mir das mal in Ruhe an. Die Werte werden vom Script gesetzt, so daß ich ohne Scriptänderungen auch nicht eingreifen kann. Aber da ich den Slider nicht entwickelt habe, sind dort Änderungen immer schwierig zu machen.

Diese beiden "resize"-Optionen sind eigentlich eher für den Hintergrund-Slider dazu gepackt worden, da hier bei jedem Event Größe/Position berechnet werden und es werden Unmengen an Events getriggert. Mit den Einstellungen werden die Events reduziert was dann den Overhead verringert und das System nicht so auslastet.

**Dirch** · 20.08.2014, 07:21

Ich kann das Verhalten nachvollziehen, auch wenn es mir während der Entwicklung auffallen würde, halte ich das tatsächliche Auftreten jedoch für relativ selten. Wenn ich im Web surfe/lese, dann resize ich mein Fenster dabei eher ziemlich selten. Das dürfte anderen ähnlich gehen.

Schön ist es nicht, aber ich wüßte auch nicht wie man dies ändern kann. Um Slider-Debugging zu betreiben fehlt mir aktuell die Zeit. :-/

**pipkin** · 20.08.2014, 11:49

Ja, habe auch überlegt, wie "schlimm" es eigentlich ist. Aber gerade bei Projekten mit responsiven und bildreichen Inhalten lernt der Nutzer ja zunehmend, dass man Sachen auch vergrößern kann durch Fensterziehen. Von daher denke ich geht der Trend sehr stark zum Rumzuppeln am Fenster beim Surfen. Z.B. bei Bildergalerien oder Videos mit Vergrößerungen über die ganze Browserbreite. Oder gekachelten Bildern im Stil von Pinterest. Wenn dann oben im Header ein Caroufredsel-Slider steckt, ist der erscrollte Fokus verloren.

Aber egal, wie wir die Wahrscheinlichkeit einschätzen - es reicht ja, wenn in einem kommerziellen Projekt der Kunde das entdeckt und doof findet. "Außer Ihnen zieht aber kaum jemand am Fenster" wäre ein Argument, das ein Kunde nicht frisst ;-)

Das mit der wenigen Zeit kenn ich allerdings auch gut ... vielleicht fällt ja jemandem eine Lösung ein.

**Dirch** · 20.08.2014, 13:03

Zitat von pipkin

Aber egal, wie wir die Wahrscheinlichkeit einschätzen - es reicht ja, wenn in einem kommerziellen Projekt der Kunde das entdeckt und doof findet. "Außer Ihnen zieht aber kaum jemand am Fenster" wäre ein Argument, das ein Kunde nicht frisst ;-)

Das mit der wenigen Zeit kenn ich allerdings auch gut ... vielleicht fällt ja jemandem eine Lösung ein.

Das stimmt, allerdings ist der carouFredSel kein kommerzielles Produkt - auch wenn er ziemlich gut ist. Und da mag dann auch die Krux liegen.

Evtl. wäre eine Lösung ein anderer Slider wie z.B. von RockSolid? Diesen gibt es auch mit kommerzieller Lizenz und entsprechendem Support und Ausi hat da aktuell sicher mehr Kapazität das zu richten - er hat es ja schon als Bug eingetragen.

**pipkin** · 20.08.2014, 13:31

Stimmt, da gebe ich Dir Recht.

In der Fülle der Erweiterungen, die es gibt (es ist ja auch schön, dass es sie gibt), verliere ich persönlich auch regelmäßig die Übersicht, was es eigentlich für welche Anwendungsfälle gibt, wie und ob sie weitergepflegt werden, wie "sicher" sie sind etc. Wenn man dann mal eine Erweiterung hat, die gut funktioniert, ist man froh, nicht mehr bei jedem Projekt wieder Zeit in die Recherche stecken zu müssen.

Mit dem Caroufredsel habe ich schon so viel gemacht und bisher noch nie ernsthafte Probleme gehabt. Der Nachteil an guter Entwicklungsarbeit ist dann wohl, dass die Erwartungshaltung der Anwender so ist wie bei kommerziellen Erweiterungen.

**Dirch** · 20.08.2014, 20:44

jau ist alles nicht so einfach. Ich würde auch gerne mehr daran werkeln, Ideen gibt es genug, selbst am Slider selbst würde ich gern etwas machen, aber ich bin ganz froh aktuell in einem lang laufenden Vollzeitprojekt zu sein weswegen ich nur zu kleineren aka nicht zeitaufwendigen Bugfixes und für Support Zeit/Lust finde. Abends in der Freizeit noch weiter zu entwickeln ist mir dann echt zu viel.

**H.C.** · 02.12.2014, 17:44

Hallo,

leider gehen diese Einstellungen unter 3.4 gar nicht mehr...

Größe Karussel
Breite: 100% flüssig
Höhe: -

Größe Elemente
Breite: -
Höhe: Variabel

Responsive: ja

Anzahl Elemente fest (1)

Ich bin hier echt am Verzweifeln...
vllt. hat ja jemand nen Lösungsansatz...

Beste Grüße
H.C.

**Dirch** · 03.12.2014, 14:35

Hast du einen Link zu der Seite? Und was bedeutet "es geht gar nicht mehr"? Werden die Einstellungen nicht ins Frontend übernommen? Gibt es JavaScript-Fehler?