Bootstrap Dropdown Untermenü öffnet sich nicht, weder bei Hover noch bei Klick

[Carino]

Hallo zusammen,

das ist meine erste Bootstrap Installation und ich habe gefühlt alles an Dokumentation gelesen, was ich finden konnte. Doch ich bekomme es nicht hin, dass das Untermenü sich öffnet. JQuery wird geladen, CSS, JS alles im Seitenlayout aktiv, genauso wie fe_bootstrap und die Konsole ist fein - doch irgendwas hab ich übersehen. Hier ein Beispiellink: https://hgs-borchert.de/start.html

Vielleicht hat jemand einen Hinweis, wo ich ansetzen kann?

LG, Carino

[zoglo]

Das Untermenü ist in deiner Beispielsseite, welche keinerlei CSS und kein JS einbindet schon sichtbar.
Du musst die Bootstrap.css und das JavaScript einbinden.

- - - Aktualisiert - - -

Wo du diese findest, kann ich dir leider nicht sagen - ohne CSS und JS ist es nur eine leere Seite

[Carino]

Hey zoglo,

danke für deine Antwort! Ja, ich arbeite gerade dran, so wie ich erfahren habe, funktioniert Contao Bootstrap noch nicht mit 4.13 dafür braucht man wohl: https://github.com/markocupic/contao...nent-bootstrap

Damit versuche ich es gerade, aber scheitere am Import:

// Import some other custom style definitions
//@import "base/page";
//@import "base/layout";
//@import "base/type";

gibt Fehler aus.

[zoglo]

Welche Fehler?

du kannst keine .css einbinden mit Import-Rulesets über die internen Stylesheets.
Du musst diese Dateien kompilieren.

https://sass-lang.com/

[zonky]

Ja, ich arbeite gerade dran, so wie ich erfahren habe, funktioniert Contao Bootstrap noch nicht mit 4.13 dafür braucht man wohl: https://github.com/markocupic/contao...nent-bootstrap

die Aussage stimmt so nicht...

Hier geht es um die Erweiterung https://github.com/contao-bootstrap die für sich bzw. mit seinen Einzelkomponenten funktioniert - und das für Contao 4.13 und Contao 5.3 mit BS 4 oder 5... je nach Version der Erweiterung

Für das Einbinden der passenden CSS/JS-Dateien ist man selbst verantwortlich und kann (muss) das an den eigenen Workflow anpassen.

[Carino]

Hallo und danke für eure Antworten!

Oh okay, ich habe die Änderungen wieder zurückgestellt wie zum Anfang meines Problems: https://hgs-borchert.de/start.html

Nach meiner Recherche auf https://contao-bootstrap.de/#download heißt es:

Version 3
Die Version 3 ist basiert auf Bootstrap 5 und steht für Contao 4.13 und 5.3 zur Verfügung. Es wird aktuell über ein Early-Adopter-Programm finanziert.

Version 2
Die Version 2 ist basiert auf Bootstrap 4 und steht für Contao 4 ab Version 4.4 zur Verfügung. Diese Version wird aktiv weiterentwickelt. Der Funktionsumfang wird auf dieser Projektseite dargestellt.

Das heißt, der Kunde müsste am Early-Adopter-Programm teilnehmen, damit das ganze für Contao 4.13 funktioniert. Oder lese ich das falsch?

Es wirkt so als würde die jQuery Datei nicht geladen werden, jedenfalls funktionieren so die Dropdown Menüs leider nicht.

LG Carino

[zonky]

Version 2
Die Version 2 ist basiert auf Bootstrap 4 und steht für Contao 4 ab Version 4.4 zur Verfügung. Diese Version wird aktiv weiterentwickelt. Der Funktionsumfang wird auf dieser Projektseite dargestellt.

Das heißt, der Kunde müsste am Early-Adopter-Programm teilnehmen, damit das ganze für Contao 4.13 funktioniert. Oder lese ich das falsch?

ja, falsch!

... da steht ab Version 4.4 - z. B. ist der Core 2.1 ab 4.9, d.h. alles was eine vier vorn hat aber kleiner als fünf ist
https://github.com/contao-bootstrap/...poser.json#L34

perspektivisch würde ich bei einem neuen Projekt aber das Paket 3 für BS 5 nehmen, was sowohl für 4.13 als auf 5.3 geht...

[Carino]

Dankeschön

Ja, wenn ich damit zurecht komme ist es auch der Plan hier mit der neuen Version zu arbeiten und am dem Projekt teilzunehmen,
bei diesem Projekte geht das jedoch leider noch nicht.

Wenn es mir 4.13 funktioniert, habe ja irgendwo noch einen Denkfehler. Egal wie ich das Dropdown Menü einbinde, es lässt sich nirgends per Klick öffnen https://hgs-borchert.de/start.html oder muss ich das Bundle hier installieren, statt die einzelnen Komponenten, damit es für 4.13 lauffähig ist?

LG Carino

[zonky]

Wenn es mir 4.13 funktioniert, habe ja irgendwo noch einen Denkfehler. Egal wie ich das Dropdown Menü einbinde, es lässt sich nirgends per Klick öffnen https://hgs-borchert.de/start.html

das sind zwei paar Schuhe!

erstens das Installieren das Paketes und zweitens die Konfiguration

Punkt 1 ist recht binär: geht oder geht nicht bzw. Du hast es installiert oder nicht

Punkt 2 kann viele Gründe haben...

=> sind Deine Fragen primär zu Punkt 1 oder 2?

[Carino]

Also falls das Dropdown Menü deshalb nicht funktioniert, da ich statt des Bundles die Einzelkomponenten installiert habe, geht es eher um das Installieren des Pakets.
Ich habe aber auch hier gelesen:

Bootstrap für Contao wurde für Contao 4.4 entwickelt und ist daher noch nicht mit Contao 4.13 aufgrund der geänderten Abhängigkeiten kompatibel.

Also im Grunde suche ich eine Möglichkeit Bootstrap für 4.13 lauffähig zu bekommen, dass auch das Menü (wie auch Grid, Cards, Layout etc.) funktioniert. Deshalb wurde ich auf Contao Component Bootstrap aufmerksam gemacht, da es damit wohl funktioniert.

[zonky]

der Text ist nicht mehr aktuell - das läuft unter Contao 4.13 prima...

Tipp: du solltest nicht alles mixen, was erreichbar ist - es sieht eher so aus, als ob Du BS 5 in BfC 2 eingebunden hast... kann man manchen, wenn man einen Plan hat ;-)

Wenn ich mir bei Deiner Seite die Konsolenausgabe ansehe, ist die (zu) "Rot" - das muss gefixt werden


Beispiele:
https://www.scrum-events.de/
https://www.gut-cert.de
https://ibera.dgk.de/

[Carino]

Oha, danke!

Ich habe jetzt die Sourcess gegen bootstrap-4.6.2 ausgetauscht und jetzt klappen die Dropdowns (auch wenn ich anfangs 2x klicken muss), damit sollte ich aber weiterkommen.
Edit: 2x klicken musste ich, da ich bootstrap.bundle.min.js und bootstrap.min.js gleichzeitig eingebunden hatte. Jetzt gehts :-)

Herzlichen Dank

[chrischnian]

Ich muss das nochmal hochholen.

Ich habe in meinem Theme das Navigationsmenu drin.
Habe Modul Template auf mod_navigation_bs und
das Navigations Template auf mod_bs gestellt

als Navigationsklassen: nav-pills nav-fill justify-content-center

<nav class="navbar navbar-light bg-tertiary navbar-expand-lg mod_navigation" aria-label="">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">[Home-Icon hier]</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="level_1 nav nav-pills nav-fill justify-content-center">
                <li class="active nav-item">
                    <strong class="active nav-link" itemprop="name" title="Startseite">Startseite</strong>
                </li>
                <li class="submenu sibling nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="/dienstleistungen/dienstleistungen.html" itemprop="url" title="Dienstleistungen" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span itemprop="name">Dienstleistungen</span>
                    </a>
                    <div class="level_2 dropdown-menu">
                        <a class="dropdown-item" href="/dienstleistungen/dienstleistungen.html" itemprop="url" title="Dienstleistungen"><span itemprop="name">Dienstleistungen</span></a>
                        <a class="dropdown-item" href="/dienstleistungen/haust%C3%BCren.html" itemprop="url" title="Haustüren"><span itemprop="name">Haustüren</span></a>
                        <a class="dropdown-item" href="/dienstleistungen/k%C3%BCchen.html" itemprop="url" title="Küchen"><span itemprop="name">Küchen</span></a>
                        <a class="dropdown-item" href="/dienstleistungen/individuelle-auftr%C3%A4ge.html" itemprop="url" title="Individuelle Aufträge"><span itemprop="name">Individuelle Aufträge</span></a>
                    </div>
                </li>
                <li class="sibling nav-item">
                    <a class="nav-link" href="/%C3%BCber-uns.html" itemprop="url" title="Über Uns"><span itemprop="name">Über Uns</span></a>
                </li>
                <li class="sibling nav-item">
                    <a class="nav-link" href="/werkstattblog.html" itemprop="url" title="Werkstattblog"><span itemprop="name">Werkstattblog</span></a>
                </li>
            </ul>
        </div>
    </div>
</nav> 

Hier die Seitenstrukur:
Bildschirmfoto_20251014_180220.png


Das Menu wird richtig dargestellt und ich sehe gerade auch kein Problem vom Code her. Aber das Dropdown klappt nicht auf.

Wer kann mir hier mehr sagen oder welche Info braucht ihr noch?

[zoglo]

Contao Version und Bootstrap Version posten (ob Bootstrap 4 oder Bootstrap 5) und Version des Contao-Bootstrap posten.

Dann Code noch einrücken, damit es einfacher zu lesen ist.

[derRenner]

<a class="nav-link dropdown-toggle" href="/dienstleistungen/dienstleistungen.html" itemprop="url" title="Dienstleistungen" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span itemprop="name">Dienstleistungen</span></a> 

hier hast du statt data-bs-toggle nur data-toggle drinnen.

[chrischnian]

Also habe den Code eingerückt im Oberen Post:

Contao: Version 5.3.40
Bootstrap: Version 3.0.0

Bootstrap CSS und JS: v.5.3.3

@derRenner
ich habe die Original Templates nichts angepasst usw.

data-toggle kein bs-data-toggle

[derRenner]

ja, aber trotzdem ist das der Fehler
data-toggle war bis Bootstrap 4 ... ab Bootstrap 5 ist es data-bs-toggle

[chrischnian]

okay dann scheint bei mir ein Template nicht zu passen!

Ich schaue mal welches das ist. Danke im Browser klappt es schon dann mal suchen welches Template es ist.