Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS3 - Flex: Dynamisches Element mit overflow-y

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS3 - Flex: Dynamisches Element mit overflow-y

    Moin,

    ich teste gerade mit css3-flex rum. Ich versuche da ein border-layout zu bauen, wobei die einzelnen Regionen automatisch scrollbar sein sollen: http://jsfiddle.net/9sebS/ (rot)
    Mit diesem Hack geht das wohl. Geht das auch ohne diesen Hack?
    Hat damit schon jemand experimentiert und hat ne Idee?

  • #2
    Was verstehst du unter "automatisch scrollbar sein soll"? Würde gerne mehr dazu hören.

    Kommentar


    • #3
      Ich meine den roten Bereich im fiddle-output. Wenn man sein Browserfenster vertikal kleiner zieht, dann fängt der Bereich irgendwann an zu scrollen. Allerdings auch nur dann, wenn das DIV mit dem Kommentar (<!-- hack -->) nicht entfernt wird.

      Kommentar


      • #4
        overflow:auto?
        [COLOR="#F5F5FF"]--[/COLOR]
        [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
        [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
        [COLOR="#F5F5FF"]
        --[/COLOR]

        Kommentar


        • #5
          Ist ja bereits so eingestellt:
          PHP-Code:
          .g-layout-border > .center > .left {
            
          width200px;
            
          min-height0;
            
          overflow-yauto;

          Das passiert, wenn ich das innere Hack-DIV entferne:
          http://jsfiddle.net/KuDuE/1/

          Kommentar


          • #6
            ich komm nicht ganz mit was du tun willst, schon da der rote bereich bei mir immer scrollbar ist, jedoch verschwindet top, wenn ich das fenster kleiner ziehe und bottom geht irgendwie auch weg.

            das top und bottom immer oben irgendwie drin sind(bottom könnte ja auch unten sein) verwundert mich auch.

            Kommentar


            • #7
              Sehen die Versionen (s.U.) bei dir gleich aus?
              http://jsfiddle.net/9sebS/
              http://jsfiddle.net/KuDuE/1/
              Welchen Browser verwendest du?

              Kommentar


              • #8
                nach dreimal rumklicken und grösser/kleiner ziehen, ja.
                kann aber sein, dass ich was übersehen habe.
                ich benütze neuerdings sogar iceweasel 24.6.0.

                und weil es alle so anders aussieht als in chrome mach ich mal screenshots.
                Angehängte Dateien

                Kommentar


                • #9
                  Ist ja interessant.

                  Aussehen sollte es so:


                  Ohne hack sieht es so aus: (der eigentliche Content kommt weiter rechts)


                  Firefox/Iceweasle 24 hat wohl noch keinen (guten) Support für display: flex.
                  Btw. zum schnellen Pasten ist http://snag.gy/ ganz iO

                  Kommentar


                  • #10
                    jo, hat mir chrome gezeigt; wichtiger war mir jedoch zu zeigen, dass bei iceweasel und verkleinertem bild, top völlig verschwindet(2. bild).

                    Kommentar


                    • #11
                      Ich muss noch dazu sagen, dass ich bei diesem Projekt den Usern vorschreiben kann, welchen Browser sie verwenden sollen. Ich kann festlegen, dass man IE10, Chrome30+ und Firefox30+ benötigt.

                      Kommentar


                      • #12
                        So? http://jsfiddle.net/9sebS/2/
                        I like cooking my family and my pets.
                        Use commas. Don't be a psycho.
                        [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                        Kommentar


                        • #13
                          Hi! Danke, dass du dich in das Thema eingeklingt hast. Ich kann die Tage nur Mobile mit Smallscreen online. Magst du kurz schreiben, was du geändert hast? Und warum?

                          Kommentar


                          • #14
                            bin ja ungern spielverderber, aber das rote kästchen ist bei meinem alten(?) browser komplett weg.
                            Angehängte Dateien

                            Kommentar


                            • #15
                              Nicht falsch verstehen, aber einen Bugreport zu Iceweasel 24/Firefox 24 würde ich sofort mit "won't fix" schließen. Mit grunt-autoprefixer sollte sich aber auch das Problem von selbst lösen. Wenn mich nicht alles täuscht, verwendet der alte Firefox noch die alte Flexbox-Notation.

                              @Änderung:
                              flex: 1 0 auto => flex: 1 0 0;

                              Dazu den 1px Hack rausgenommen.


                              VG

                              Basti
                              I like cooking my family and my pets.
                              Use commas. Don't be a psycho.
                              [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                              Kommentar

                              Lädt...
                              X