Menü im Mobile Flow Theme nicht scrollbar

#1

Hallooo liebe Leute :slight_smile:

Nachdem ich gestern schon mit euch so gute Erfahrungen gemacht habe, dachte ich mir, ich frag gleich nochmal was.

Wir haben auf https://decorami.de ein Custom Theme, dessen Elten Theme Flow ist. Ich habe im Flow Theme gesehen, dass sich das Menü exakt genauso verhält. Wenn das ausgeklappte Menü größer ist als das Display, dann kann ich im Menü selber nicht nach unten scrollen, damit ich auch die nicht angezeigten Menüpunkte erreichen kann. Wie kann ich das ändern?

Ich habe es schon durch

position: fixed;
max-height: calc(100% - 50px);
background-color: #fff;

in der style.min.css an der Stelle .navbar-collapse halbwegs hinbekommen, jedoch war das ein bisschen buggy und hat auch auf der Desktopseite zu Anzeigeproblem geführt.

Ich hoffe ihr könnt mir wieder weiterhelfen! :blush:

Danke und liebe Grüße!

0 Likes

#2

Wenn ich es richtig verstanden habe, sollte das wie folgt gehen:
> <ul id="navigation" class="nav navbar-nav" style="height: auto; max-height: 250px; overflow-x: hidden;">
Also folgendes in <ul id=“navigation”…
style="height: auto; max-height: 250px; overflow-x: hidden;"

0 Likes

#3

Hallo rubbercut,

das ist schonmal ein richtig guter Ansatz, jedoch beeinflusst dies leider auch die Anzeige in der Desktopansicht. Geändert habe ich die Passage in der categorylist.tpl
Wie bekomme ich noch die Bedingung rein, dass diese Regel nur für das Mobile Theme gelten soll?
Irgendwie mit einer if-Abfrage vielleicht?

if Displaygröße < 770px, dann style=“height: auto; max-height: 250px; overflow-x: hidden;”
else style=""

Irgendwie so was vielleicht?!

0 Likes

#4

Dafür kannst z.B. statt des Hinzufügens der Werte direkt am Objekt (inline) eine Klasse (Bsp “deine_klasse”) hinzufügen und über ein media query bestimmen, dass diese nur gilt, wenn eine bestimmte Breite vorliegt: Feddisch :wink:
CSS:

@media only screen and (max-width: 479px){
.deine_klasse {
height: auto; max-height: 250px; overflow-x: hidden;
}
}
Sorry, das Formatieren hier ist echt eine Qual.

0 Likes

#5

Funktioniert wunderbar, vielen lieben Dank!

Allerdings ist nun ein neues Problem aufgetaucht.
Damit sich bei einem Klick auf eine Hauptkategorie die Unterkategorien öffnen, habe ich die li-Klasse in der categorylist.tpl von “dropdown” zu “dropdown-toggle” geändert. Das funktioniert nun auch wunderbar, hat allerdings leider den Nachteil, dass es natürlich auch die Desktopansicht verändert.
Bisher wurde bei einem Mousehover in der Desktopansicht jede Unterkategorie angezeigt, nun muss man draufklicken.

Wie schaffe ich das voneinander zu trennen? Unterkategorien mobil per Tipp, am Desktop per Mousehover…?!

0 Likes

#6

Solche statischen Änderungen kannst dann auch nur dort ändern: Dafür kannst Dir den themeswitcher anschauen und das sieht dann ungefähr so aus:

[{ assign var=‘oUserAgent’ value=$oViewConf->oeThemeSwitcherGetUserAgent() }] [{if $oUserAgent->getDeviceType() == ‘mobile’ }]dropdown-toggle[{else}]dropdown[{/if}]

0 Likes

#7

Habe es eben mal ausprobiert, aber ich glaube das funktioniert für mich nicht. Unser Theme ist responsive, d.h. es ist kein für sich stehendes mobiles Theme installiert. Beim Oxid Theme Switcher habe ich in den Einstellungen einfach mal unser Theme eingetragen, jedoch hat das funktioniert. :frowning:

Danke auf jeden Fall für deine Mühen, rubbercut! :slight_smile:

0 Likes

#8

Ja, der ist ja im Zusammenspiel mit dem mobile-Theme einzusetzen. Du müsstest Dir ein kleines Modul schreiben, das den Devicetype checkt und ausgibt :wink:

0 Likes

#9

Update: es funktioniert gewissermaßen doch, aber der Theme Switcher bewirkt, dass einige Einstellungen abgeändert werden. Bspw. werden dadurch weniger Produkte pro Zeile angezeigt, dafür mit Kurzbeschreibung, welche eigentlich nicht vorgesehen ist.

0 Likes

#10

Ohje… :smile: das übersteigt meine Kenntnisse, aber ich werde mal googeln :sweat_smile:

0 Likes

#11

Schau mal folgendes an: oePayPalUserAgent

0 Likes

#12

Kann mir gut vorstellen, dass es so funktioniert, aber ich bekomme es noch nicht ganz hin. Ich habe mir folgendes abgeleitet:

[{assign var=“oUserAgent” value=$oViewConf->oxNew(‘oePayPalUserAgent’)}]
[{if $oUserAgent->getDeviceType() == ‘mobile’ }]dropdown-toggle[{else}]dropdown[{/if}]

Irgendwas ist noch falsch oder? :sweat_smile:

0 Likes

#13

Das würde so funktionieren, wenn paypal oxviewconfig erweitern würde, wie der switcher.
Mach es einfach so : Mobiile-Detect 4.10.x Demo installieren und mache aus

[{$oViewConf->getmyDeviceType()}]

deine Abfrage, als [{ if … “==” }]

0 Likes

#14

Es will einfach nicht :joy: habe dein empfohlenes Modul installiert und folgende Code-Varianten ausprobiert:

[{assign var=“oUserAgent” value=$oViewConf->getmyDeviceType()}]

<li class="[{if $oUserAgent->getmyDeviceType() == ‘mobile’}]dropdown-toggle[{else}]dropdown[{/if}]">

[{assign var=“oUserAgent” value=$oViewConf->getmyDeviceType()}]

<li [{if $oUserAgent->getmyDeviceType() == ‘mobile’}]class=“dropdown-toggle”[{else}]class=“dropdown”[{/if}]>

Beide mit dem Ergebnis, dass die Seite genau an diesem Punkt abbricht zu laden… :frowning: was mache ich falsch?

0 Likes

#15

Och menno :

[{if $oViewConf->getmyDeviceType() == ‘mobile’}]…[{else}]…[{/if}]

0 Likes

#16

Oh man ich bin dämlich. So was offensichtliches :rofl:

Zum Glück gibt es User wie dich! Vielen vielen lieben Dank! Du hast mir sehr weiter geholfen!

0 Likes

#17

JoJo :cowboy_hat_face:

0 Likes