Frage Hilfe bei scrollbaren Breadcrumb

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

ichbineinberliner

Neues Mitglied
26 Dezember 2020
10
0
1
22
Hallo ich bin gerade bei der Erstellung eines Breadcrumbs für eine Website und benötige jetzt Hilfe dabei.

Das Ganze ist nur für eine mobile Version und soll dem Nutzer anbieten durch zu scrollen, weil es letztendlich auch lange Namen der Unterseiten sind.
Mit Display: Flex; und Justify-Content: Flex-End; erreiche ich schon, dass das ganze rechtsbündig ist, wenn es ein langer Text nachher ist. Dann kann ich aber nicht mehr nach links scrollen. Wenn ich aber Flex-Start mache ist es linksbündig und ich kann nach rechts scrollen. Wie kann ich diesen Fehler beheben?

Und wie kann ich es so machen, dass es bei wenig Text linksbündig und bei mehr Text rechtsbündig ist?

Beste Grüße
 

Anhänge

  • Bildschirmfoto 2021-02-26 um 09.58.20.png
    Bildschirmfoto 2021-02-26 um 09.58.20.png
    75,6 KB · Aufrufe: 2
  • Bildschirmfoto 2021-02-26 um 09.58.07.png
    Bildschirmfoto 2021-02-26 um 09.58.07.png
    85,1 KB · Aufrufe: 2

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.517
479
83
68
Dies hier erfüllt bei mir beide Anforderungen:
Code:
    <div id="cont-scr-breadcrumb">
        <div id="scr-breadcrumb" contenteditable="true">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
            diam nonumy eirmod tempor invidunt ut labore et dolore
            magna aliquyam erat, sed diam voluptua.</div>
    </div>
Code:
        #cont-scr-breadcrumb {
            overflow-x: auto;
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-start;
        }

        #scr-breadcrumb {
            white-space: nowrap;
            flex: 1;
        }
(contenteditable nur um es leicht testen zu können).
Getestet nur auf dem Desktop, nicht auf dem Handy.
 
  • Like
Reaktionen: ichbineinberliner

ichbineinberliner

Neues Mitglied
26 Dezember 2020
10
0
1
22
Dies hier erfüllt bei mir beide Anforderungen:
Code:
    <div id="cont-scr-breadcrumb">
        <div id="scr-breadcrumb" contenteditable="true">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
            diam nonumy eirmod tempor invidunt ut labore et dolore
            magna aliquyam erat, sed diam voluptua.</div>
    </div>
Code:
        #cont-scr-breadcrumb {
            overflow-x: auto;
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-start;
        }

        #scr-breadcrumb {
            white-space: nowrap;
            flex: 1;
        }
(contenteditable nur um es leicht testen zu können).
Getestet nur auf dem Desktop, nicht auf dem Handy.
Wow, vielen Dank!
Das ist genau so wie ich es gebraucht habe. Ich hätte nicht gedacht, dass das wirklich funktioniert. :D

Das einzige was mich jetzt noch ein wenig stört ist, wenn ich nach ganz links wische, dann hab ich keinen Abstand wie rechts (25px). Kann man das noch bearbeiten? Magst du mir dabei noch einmal helfen?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.517
479
83
68
Ich hätte nicht gedacht, dass das wirklich funktioniert.
Zunächst dachte ich auch, es geht nicht, ohne dass man die Scrollposition mit Javascript setzt. Aber es ging dann doch.

Das einzige was mich jetzt noch ein wenig stört ist, wenn ich nach ganz links wische, dann hab ich keinen Abstand wie rechts (25px). Kann man das noch bearbeiten?
Müsste eigentlich mit einem geeigneten Padding zu machen sein. Poste doch Mal das HTML und CSS, das Du jetzt hast.
 

ichbineinberliner

Neues Mitglied
26 Dezember 2020
10
0
1
22
Also das mit dem Padding habe ich hinbekommen. Jetzt ist es aber leider so, dass es riesige Abstände gibt, wenn die zweite Unterseite nicht so lang ist wie der Bildschirm...
 

Anhänge

  • Bildschirmfoto 2021-02-26 um 12.40.05.png
    Bildschirmfoto 2021-02-26 um 12.40.05.png
    12,4 KB · Aufrufe: 2

ichbineinberliner

Neues Mitglied
26 Dezember 2020
10
0
1
22
HTML:
<div class="breadcrumb">
    <a href="#" id="active" contenteditable="true">Unterseite</a>
    <a href="../" contenteditable="true">Startseite</a>
</div>

CSS:
.breadcrumb {
    display: inline;
    background: #e6e6e6;
    height: 30px;
    padding: 0px 25px 0px 25px;
    width: calc(100% - 50px);
    display: flex;
    align-items: center;
    overflow-x: auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.breadcrumb a {
    white-space: pre-line;
    flex: 1;
    font-size: 15px;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: -1px;
    text-decoration: none;
    color: #000000;
}

.breadcrumb a#active {
    font-family: sans-serif;
    font-size: 15px;
}

.breadcrumb a+a:last-child::after {
    content: "▸";
    padding: 0px 10px 0px 10px;
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.517
479
83
68
Normaler Weise bin ich gegen viele Container aber in diesem Fall ...
Besser einen zusätzlichen Container für den gescrollten Content verwenden, dann kann man die Inhalte unabhängig anordnen:
Code:
        .breadcrumb {
            background: #e6e6e6;
            height: 30px;
            padding: 0px 25px 0px 25px;
            width: calc(100% - 50px);
            align-items: center;
            overflow-x: auto;
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-start;
        }

        .breadcrumb-inner {
            flex: 1;
            white-space: nowrap;
        }

        .breadcrumb a {
            white-space: pre-line;
            font-size: 15px;
            white-space: nowrap;
            display: inline-block;
            margin-bottom: -1px;
            text-decoration: none;
            color: #000000;
        }

        .breadcrumb a#active {
            font-family: sans-serif;
            font-size: 15px;
        }

        .breadcrumb a+a::before {
            content: "▸";
            padding: 0px 10px 0px 10px;
        }
Code:
    <div class="breadcrumb">
        <div class="breadcrumb-inner" contenteditable="true">
            <a href="#" id="active">Unterseite</a>
            <a href="../" contenteditable="true">Startseite</a>
        </div>
    </div>
 
  • Like
Reaktionen: ichbineinberliner
Werbung: