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?
    Standards - Best Practices - AwesomePHP - Guideline für WebApps


  • #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.
      Standards - Best Practices - AwesomePHP - Guideline für WebApps

      Kommentar


      • #4
        overflow:auto?
        --

        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
        Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


        --

        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/
          Standards - Best Practices - AwesomePHP - Guideline für WebApps

          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?
              Standards - Best Practices - AwesomePHP - Guideline für WebApps

              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
                  Standards - Best Practices - AwesomePHP - Guideline für WebApps

                  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.
                      Standards - Best Practices - AwesomePHP - Guideline für WebApps

                      Kommentar


                      • #12
                        So? http://jsfiddle.net/9sebS/2/
                        I like cooking my family and my pets.
                        Use commas. Don't be a psycho.
                        Blog - CoverflowJS

                        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?
                          Standards - Best Practices - AwesomePHP - Guideline für WebApps

                          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.
                              Blog - CoverflowJS

                              Kommentar

                              Lädt...
                              X