Pit: Inhalt in DIV mit Pfeilicons scrollbar machen

Hallo Forum,

nachdem es mir gelungen ist, eine Flexbox zu gestalten (hab ich die korrekt gemacht?), würde ich gerne erreichen, dass der Inhalt im linken DIV nicht in eine 2.Zeile geht, wenn er zu groß ist, sondern per Pfeilicons horizontal scrollbar ist, so wie hier (nicht mein Code, auch wenn er in meinem Fiddle steht).

Alle Beispiele im Netz sind aber an absolute Pixelwerte gebunden. Ich hätte es aber gerne, wenn sich die Gesamtbreite der beiden DIVs an der Viewportbreite orientiert und hier das rechte DIV vorgibt, wieviel Platz dem linken DIV übrig bleibt. Innerhalb des linken DIVs soll dann der Inhalt (nicht per Scrollbalken!) über Pfeilicons rechts und links scrollbar sein.

Hintergrund (für die, die es interessiert): In das linke DIV soll ein Suchfeld bzw. nach der Suche dann die verlinkten Suchergebnisse hinein. Der Rest des Viewports ist für den Inhalt, der u.a. dann über das Klicken der verlinkten Suchergebnisse erscheinen soll.

Geht das oder anders gefragt, wie macht man das?

Pit

  1. @@Pit

    Hallo Forum,

    nachdem es mir gelungen ist, eine Flexbox zu gestalten (hab ich die korrekt gemacht?)

    Wozu das <div id='gesamt'>? Das Ding gruppiert nichts; ist also überflüssig. footer kann die Flexbox sein. Das sagte ich doch schon.

    Und display: -webkit-flex; /* Safari */ ist wohl ein verspäteter Aprilscherz?

    würde ich gerne erreichen, dass der Inhalt im linken DIV nicht in eine 2.Zeile geht, wenn er zu groß ist, sondern per Pfeilicons horizontal scrollbar ist, so wie hier (nicht mein Code, auch wenn er in meinem Fiddle steht).

    Ein Sehschlitz also. Und der soll nutzerfreundlich sein?

    Es ist in den seltensten Fällen eine gute Idee, vohandene Browserfunktionalität mit eigenen UI-Elementen nachbauen zu wollen. Browser bieten bei Bedarf Scrollbalken an (overflow: auto).

    Innerhalb des linken DIVs soll dann der Inhalt (nicht per Scrollbalken!) über Pfeilicons rechts und links scrollbar sein.

    Was genau spricht gegen die browsereigenen Scrollbalken?

    Geht das oder anders gefragt, wie macht man das?

    Auf keinen Fall mit <div id="leftArrow">/<div id="rightArrow">.

    div sind keine interaktiven Elemente – nicht per Tastatur bedienbar, um nur einen Makel zu nenenen. Wenn du interkative Elemente willst, willst du buttons.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hallo Gunnar,

      nachdem es mir gelungen ist, eine Flexbox zu gestalten (hab ich die korrekt gemacht?)

      Wozu das <div id='gesamt'>? Das Ding gruppiert nichts; ist also überflüssig. footer kann die Flexbox sein. Das sagte ich doch schon.

      Und display: -webkit-flex; /* Safari */ ist wohl ein verspäteter Aprilscherz?

      Nun sei doch nicht so streng mit mir. Woher soll ich denn wissen, ob die Safarigeschichte noch aktuell ist, wenn ich ein Tutorium lese?

      würde ich gerne erreichen, dass der Inhalt im linken DIV nicht in eine 2.Zeile geht, wenn er zu groß ist, sondern per Pfeilicons horizontal scrollbar ist, so wie hier (nicht mein Code, auch wenn er in meinem Fiddle steht).

      Ein Sehschlitz also. Und der soll nutzerfreundlich sein?

      Ich finde schon und da ich derjenige bin, der es vor dem Nutzer verantworten muss... Wird doch bei Photoslidern permanent so gemacht, oder? Aber vielleicht kann ich mich auch mit einem Scrollbalken anfreunden, muss mal drüber nachdenken.

      Es ist in den seltensten Fällen eine gute Idee, vohandene Browserfunktionalität mit eigenen UI-Elementen nachbauen zu wollen. Browser bieten bei Bedarf Scrollbalken an (overflow: auto).

      Habe ich übrigens versucht und es ging nicht. Vielleicht habe ich etwas wie Nowrap vergessen?

      Innerhalb des linken DIVs soll dann der Inhalt (nicht per Scrollbalken!) über Pfeilicons rechts und links scrollbar sein.

      Was genau spricht gegen die browsereigenen Scrollbalken?

      Eigentlich nur, dass er mir vertikalen Platz wegnimmt, mehr nicht.

      Geht das oder anders gefragt, wie macht man das?

      Auf keinen Fall mit <div id="leftArrow">/<div id="rightArrow">.

      Nicht mein code, sagte ich ja.

      div sind keine interaktiven Elemente – nicht per Tastatur bedienbar, um nur einen Makel zu nenenen. Wenn du interkative Elemente willst, willst du buttons.

      LLAP

      Pit

      1. Habe ich übrigens versucht und es ging nicht. Vielleicht habe ich etwas wie Nowrap vergessen?

        Nun habe ich wieder versucht, aber zb. Auf meinEM Androiden 4.1.2 wird gar kein Scrollbalken angezeigt, was wieder für die left−right Buttons spricht, oder ?

        Pit

        Innerhalb des linken DIVs soll dann der Inhalt (nicht per Scrollbalken!) über Pfeilicons rechts und links scrollbar sein.

        Was genau spricht gegen die browsereigenen Scrollbalken?

        Eigentlich nur, dass er mir vertikalen Platz wegnimmt, mehr nicht.

        Geht das oder anders gefragt, wie macht man das?

        Auf keinen Fall mit <div id="leftArrow">/<div id="rightArrow">.

        Nicht mein code, sagte ich ja.

        div sind keine interaktiven Elemente – nicht per Tastatur bedienbar, um nur einen Makel zu nenenen. Wenn du interkative Elemente willst, willst du buttons.

        LLAP

        Pit

        1. Hallo Pit,

          Nun habe ich wieder versucht, aber zb. Auf meinEM Androiden 4.1.2 wird gar kein Scrollbalken angezeigt, was wieder für die left−right Buttons spricht, oder ?

          Aber der Inhalt ist trotzdem scrollbar? Auf vielen mobilen Geräten werden gar keine oder nur sehr schmale, nur bei Bedarf erscheinende Scrollbalken verwendet. Und das ist auch gut so.

          Alles, was du oder ich oder auch Gunnar da nachbauen können, wäre nur ein Nachbau und der ist immer schlechter als das Original, wobei es das Original gar nicht gibt.

          Mit overflow verwendest du die Scrollbalken des Systems auch dann noch, wenn Designer sie ändern.

          Bis demnächst
          Matthias

          --
          Rosen sind rot.
      2. Hallo

        Und display: -webkit-flex; /* Safari */ ist wohl ein verspäteter Aprilscherz?

        Nun sei doch nicht so streng mit mir. Woher soll ich denn wissen, ob die Safarigeschichte noch aktuell ist, wenn ich ein Tutorium lese?

        Indem du lernst, mit Can I Use? umzugehen („aufgeschlagene“ Seite: Flexbox). Diese Seite wirst du bei Experimenten immer geöffnet haben und du wirst sie befragen, um zu ermitteln, in welchen Browserversionen Feature X unter welchen weiteren Voraussetzungen (z.B. eben Vendor-Präfixe) funktioniert.

        Tschö, Auge

        --
        Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
        Toller Dampf voraus von Terry Pratchett
        1. Hallo Auge,

          Indem du lernst, mit Can I Use? umzugehen

          Hilfreich aber nicht 100% verlässlich.

          Gruss
          Henry

          1. Hallo

            Indem du lernst, mit Can I Use? umzugehen

            Hilfreich aber nicht 100% verlässlich.

            Ja und? Was ist schon 100%-ig verlässlich?

            Im Übrigen, wenn ich deine Postings in dem von dir verlinkten Thread lese, habe ich den Eindruck, dass du die mehrfachen Hinweise auf die Fußnoten tapfer ignoriert hast. Du hast dich ja auch nach diesen Hinweisen immer wieder auf die „angebliche“ Unterstützung von Hyphen durch den Chrome kapriziert, ohne mit irgendeinem Wort auf die in den Anmerkungen und der Fußnote genannten Einschränkungen einzugehen.

            Ob Can I Use? speziell bei deinem Problem nicht verlässlich ist, lässt sich anhand deines Threads mMn nicht mit Sicherheit sagen.

            Tschö, Auge

            --
            Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
            Toller Dampf voraus von Terry Pratchett
            1. Hallo Auge,

              Ja und? Was ist schon 100%-ig verlässlich?

              war auch nicht abwertend gemeint, lediglich als Info im Hinterkopf behalten.

              Im Übrigen, wenn ich deine Postings in dem von dir verlinkten Thread lese, habe ich den Eindruck, dass du die mehrfachen Hinweise auf die Fußnoten tapfer ignoriert hast. Du hast dich ja auch nach diesen Hinweisen immer wieder auf die „angebliche“ Unterstützung von Hyphen durch den Chrome kapriziert, ohne mit irgendeinem Wort auf die in den Anmerkungen und der Fußnote genannten Einschränkungen einzugehen.

              Stimmt das? Nein:

              was heißt Rechner, Android. Und das sollte laut Fußnote gehen.

              Falls ihr etwas anderes aus der Fußnote heraus gelesen habt, wäre es schön gewesen mich darauf hin zu korrigieren. Da dies aber nicht erfolgt ist, dachte ich und denke das immer noch, dass es in der Kombi Android/Chrome, trotz Fußnote, nicht funktioniert.

              Ob Can I Use? speziell bei deinem Problem nicht verlässlich ist, lässt sich anhand deines Threads mMn nicht mit Sicherheit sagen.

              Sehe ich auch so, daher habe ich es ja gepostet, auch in der Hoffnung, hier Erfahrungswerte mit gleichen Kombinationen zu erhalten.

              Gruss
              Henry

              1. Hallo

                Du hast dich ja auch nach diesen Hinweisen immer wieder auf die „angebliche“ Unterstützung von Hyphen durch den Chrome kapriziert, ohne mit irgendeinem Wort auf die in den Anmerkungen und der Fußnote genannten Einschränkungen einzugehen.

                Stimmt das? Nein:

                was heißt Rechner, Android. Und das sollte laut Fußnote gehen.

                Ah ja, habe ich jetzt auch gefunden (hättest du ruhig mal verlinken können).

                Falls ihr etwas anderes aus der Fußnote heraus gelesen habt, wäre es schön gewesen mich darauf hin zu korrigieren.

                Da steht aber mehr, als nur, dass es in der Kombination Android/Chrome funktioniert. Da wäre erstens die Einschränkung, dass nur der Wert auto unterstützt wird (ich gehe davon aus, dass du den benutzt) und zweitens, dass es ratsam ist, das Lang-Attribut für das Element html zu setzen, so übersetzt ich das zumindest. „It is advisable to set the @lang attribute on the HTML element …“ könnte (für mich und rein theoretisch) genausogut heißen, das Lang-Attribut für das HTML-Element, für das Hyphens gelten soll, zu setzen.

                Eine letzte Einschränkung erwähnt der auf „Can I Use?“ verlinkte MDN-Artikel zu Hyphens. „In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available.“ Die Hervorhebung ist von mir. Keine Ahnung, ob das Wörterbuch vom Betriebsystem geliefert wird oder der Browser das mitbringt und ob das in jedem Fall installiert ist bzw. wegen nicht passender Spracheinstellung des Betriebssystems oder des Browsers nicht installiert ist.

                Da dies aber nicht erfolgt ist, dachte ich und denke das immer noch, dass es in der Kombi Android/Chrome, trotz Fußnote, nicht funktioniert.

                Korrigieren kann ich das jedenfalls nicht, aber Gunnar hat explizit geschrieben, dass Chrome Silbentrennung unterstützt. Seine Formulierung lässt mich eigene Erfahrungen vermuten.

                Tschö, Auge

                --
                Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                Toller Dampf voraus von Terry Pratchett
                1. @@Auge

                  Korrigieren kann ich das jedenfalls nicht, aber Gunnar hat explizit geschrieben, dass Chrome Silbentrennung unterstützt.

                  Auf macOS tut er das.

                  Seine Formulierung lässt mich eigene Erfahrungen vermuten.

                  Mit Android hab ich inzwischen weniger eigene Erfahrungen.

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      3. Hallo Pit,

        Woher soll ich denn wissen, ob die Safarigeschichte noch aktuell ist, wenn ich ein Tutorium lese?

        War es eins von uns?

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
        1. Hallo Matthias,

          War es eins von uns?

          Nein.

          pit

    2. Hallo,

      würde ich gerne erreichen, dass der Inhalt im linken DIV nicht in eine 2.Zeile geht, wenn er zu groß ist, sondern per Pfeilicons horizontal scrollbar ist, so wie hier (nicht mein Code, auch wenn er in meinem Fiddle steht).

      Ein Sehschlitz also. Und der soll nutzerfreundlich sein?

      Vielleicht hast Du recht und ich blende den Inhalt besser über ein zusätzliches DIV ein, das der User dann bei Bedarf wieder wegklciken kann.

      hierzu eine Frage:

      Möchte ich über eine oder in eine Webseite ein DIV mit zusätzlichen Informationen einblenden, das auch bei Reloads (welcher Art auch immer) solange vorhanden sein soll, bis der User es aktiv ausblendet (über einen Button im DIV) oder er den Browser schließt, ist welche Technik die beste? Ich habe so etwas mal in einem anderen Zusammenhang genutzt und habe es seinerzeit über die damals ganz neue HTML5-Funktion local storage gelöst. Gibt es irgend etwas, was gegen eine Lösung hiermit spricht oder gibt es eine bessere Lösung?

      Pit

      1. @@Pit

        Vielleicht hast Du recht und ich blende den Inhalt besser über ein zusätzliches DIV ein, das der User dann bei Bedarf wieder wegklciken kann.

        hierzu eine Frage:

        Möchte ich über eine oder in eine Webseite ein DIV mit zusätzlichen Informationen einblenden, das auch bei Reloads (welcher Art auch immer) solange vorhanden sein soll, bis der User es aktiv ausblendet (über einen Button im DIV) oder er den Browser schließt, ist welche Technik die beste?

        Hierzu zwei Fragen

        1. Das Ding ist inial da, Der Nutzer soll es ausblenden können. Soll sie es auch wieder einblenden können?
        2. Wenn das Ding schon ausgeblendet wurde, soll es nache einem Reload weiterhin ausgeblendet oder wieder eingeblendet sein?

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo Gunnar,

          Hierzu zwei Fragen

          1. Das Ding ist inial da, Der Nutzer soll es ausblenden können. Soll sie es auch wieder einblenden können?
          2. Wenn das Ding schon ausgeblendet wurde, soll es nache einem Reload weiterhin ausgeblendet oder wieder eingeblendet sein?

          Ansich war geplant, dass der User es nur 1 x ausblenden kann und bei Bedarf könnte er es ja über eine erneute Suche ohnehin wieder generieren. Aber Deine Rückfragen machen mich nachdenklich, da steckt womöglich eine gute Idee drin. Das DIV wird voraussichtlich eine Liste werden. Zudem wird sie draggable werden.

          Ich würde sagen, der User kann die Liste wegklicken und sie bleibt weg, auch nach reload. Ich kann mir aber gut vorstellen, dass der User die Liste auch minimieren und maximieren kann, sodass sie ihm nicht die Sicht auf den rest der Website nimmt, wenn er die Liste im Hintergrund behalten will.

          Ich denke nach wie vor, dass das mit local storage am besten zu realisieren ist, bin aber natürlich für Vorschläge offen. Die Frage ist natürlich auch, was genau im local storage abgelegt wird. Das Suchergebniss selber oder nur, dass eine offene Suche existiert und den dazugehörigen Suchbegriff.

          Pit

          1. @@Pit

            Ich kann mir aber gut vorstellen, dass der User die Liste auch minimieren und maximieren kann, sodass sie ihm nicht die Sicht auf den rest der Website nimmt, wenn er die Liste im Hintergrund behalten will.

            Das Auf- und Zuklappen ließe sich mit evtl. mit dem details-Element realisieren. ☞ Codepen

            Du kannst auch einen zusätzlichen Schließen-Button einbauen. ☞ Codepen

            Ich denke nach wie vor, dass das mit local storage am besten zu realisieren ist, bin aber natürlich für Vorschläge offen. Die Frage ist natürlich auch, was genau im local storage abgelegt wird. Das Suchergebniss selber oder nur, dass eine offene Suche existiert und den dazugehörigen Suchbegriff.

            Nur, ob auf- oder zugeklappt (in meinem Beispiel den Wert des open-Attributs).

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Hi Gunnar,

              Das Auf- und Zuklappen ließe sich mit evtl. mit dem details-Element realisieren. ☞ Codepen

              Kannte ich bisher gar nicht. Ich hätte das jetzt über ein (un-)sichtbar machen der li-Ememente mit jquery gemacht (wird eh mitgeladen, daher kein zusätzliche Load) Aber ich schaue mir mal an, ob ich eine mit dem details-Element auch in Listen die li-Elemente verbergen kann.

              Du kannst auch einen zusätzlichen Schließen-Button einbauen. ☞ Codepen

              Na, den brauchts nicht wirklich. Es schließt ja über die Überschrift auch sehr schön. Aber mein Close-Button sollte ja auch gar nicht das Elemet einklappen, sondern das Div löschen.

              Ich denke nach wie vor, dass das mit local storage am besten zu realisieren ist, bin aber natürlich für Vorschläge offen. Die Frage ist natürlich auch, was genau im local storage abgelegt wird. Das Suchergebniss selber oder nur, dass eine offene Suche existiert und den dazugehörigen Suchbegriff.

              Nur, ob auf- oder zugeklappt (in meinem Beispiel den Wert des open-Attributs).

              Ich denke, da muß zudem noch etwas mehr mehr rein. Denn der User soll innerhalb der Seite navigieren können, einen Reload durchführen können, usw. Dann muß die Seite aber 3 Dinge wissen:

              1. DIV einblenden oder nicht?
              2. DIV ein- oder ausgeklappt einblenden?
              3. Was steht im DIV drin?

              Pit

              1. Dann muß die Seite aber 3 Dinge wissen:

                1. DIV einblenden oder nicht?
                2. DIV ein- oder ausgeklappt einblenden?
                3. Was steht im DIV drin?

                Pit

                Habe mich nun doch gegen local Sorage entschieden. Grund: Ein cookie oder ein sessioncookie kann das, was ich benötige, genausogut und ist php-affiner.

                Pit

                1. Hallo Pit,

                  Habe mich nun doch gegen local Sorage entschieden.
                  Grund: Ein cookie oder ein sessioncookie kann das, was ich benötige, genausogut und ist php-affiner.

                  Den schickst du aber durch die ganze Welt. Theoretisch verarbeitest du mit einem cookie personengebundene Daten. Zumindest könnten sie dir bekannt werden, was bei Verwendung des localStorage nicht der Fall ist.

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.