Rahmen um die cols in einer row, auch bei Umbruch

  • Hallo zusammen,


    ich arbeite mit bootstrap 4. Ich möchte ein Grid so gestalten, dass es am Ende eine Art Tabelle ist, ich möchte aber nicht mit table arbeiten, sondern als grid.


    aktuell sieht es so aus:


    pasted-from-clipboard.png


    bei Zeilenumbruch und Rahmen;


    pasted-from-clipboard.png




    Mein HTML:


    Mein CSS dazu:


    Ich bekomme quasi es nicht hin, das die komplette Höhe der ersten Zeile als Rahmen zu haben, sondern nur die Höhe des Textes.


    Kann mir jemand weiterhelfen?


    Danke,


    Erik

  • Dich stört, dass die Zellen in der oberen Zeile die Höhe nicht vollständig ausfüllen, was sichtbar ist, wenn die Rahmen aktiv sind?

    Das kannst Du beheben, indem Du das Alignment auf stretch statt center setzt:

    Code
    1. <div class="row justify-content-center align-items-stretch grid-heading">
  • Gerade wenn Du Anfänger bist, empfehle ich, gleich mit den Originalen Grid- und Flexlayout einzusteigen. Beide sind genau dafür entwickelt worden, responsive Layouts zu realisieren und einfacher anzuwenden als Bootstrap.

    Einstieg in Flex hier bei HTML-Seminar:

    https://www.html-seminar.de/css-flexbox.htm


    Übersicht über Flex und Grid:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    https://css-tricks.com/snippets/css/complete-guide-grid/

  • hmm, schau mal, ist die herangehensweise so okay? Sollte ich was ändern?

    Ich habe lange gefriemelt, wie ich die Größe der Spalten berechnen kann, habe es dann so gelöst. auf Basis des Textes...


    Was mir nicht ganz gefällt ist, dass der Rahmen der divs nicht durchgängig ist. Das hat sich aber erst durch align-self: flex-end; geändert, weil ich wollte die Spaltenüberschriften unten stehen haben, erst standen die oben....


    Kannst gern meckern wenn ich sinnlose sachen mache, oder komplett falsch das ganze aufbaue...


    HTML


    CSS:

  • Dafür, dass Du ganz am Anfang bist mit Flex ist das doch schon ein sehr ordentliches Ergebnis. Das mit den Rahmen kannst Du beheben, indem Du bei align-items: stretch; bleibst und den Text innerhalb wiederum mit Flex unten ausrichtest:

    Code
    1. .grid-header {
    2. font-weight: bold;
    3. text-align: center;
    4. /* align-self: flex-end; */
    5. border-style: solid;
    6. border-width: 0px 1px 0px 0px;
    7. border-color: #000000;
    8. display: flex;
    9. align-items: flex-end;
    10. }

    Ich hätte das gleich sagen sollen weil es aus deinem Eingangsposting schon ersichtlich war: Besser würde sich hier Grid eignen, weil es ein Gitter liefert, bei dem die Zellen automatisch vertikal in einer Linie ausgerichtet sind. Bei Flex haben die Elemente in den Zeilen zunächst mal keine Beziehung zueinander und man muss, wie Du es getan hast, die Ausrichtung durch einheitliche Größe erzwingen.

    Wenn Du dir Grid ansiehst, dann achte auf grid-template-colums: Damit kannst Du sehr leicht die Proportionen der Spaltenbreiten einstellen ohne jeder Zelle eine eigene Klasse zuweisen zu müssen.

  • Ich habe mal ein flexibles responsives Online-Beispiel nach den aktuellen HTML- und CSS-Regeln mit CSS-Grid erstellt.


    Der HTML-Teil des Quelltextes ist deutlich übersichtlicher und damit pflegeleichter. Das CSS kann eventuell noch etwas vereinfacht werden, speziell die Erstellung des Rahmens in der Tabellenansicht, das war mir aber nicht so wichtig.


    https://www.w3schools.com/code…asp?filename=GOHC0YFJ9SUY


    Dort auf den grünen Run-Button klicken, die Breite des Fensters kann durch verschieben des Mittelstegs geändert werden. Änderungen können direkt im Quelltext gemacht und durch erneutes Klicken auf Run ausgeführt werden.

  • Die Variante von MrMurpy habe ich jetzt mal um eine Zeile erweitert, das sieht zwar gut aus, aber beim Umbruch passt nichts mehr und für mich ist es auch nicht einfach nachvollziehbar, wo dann der zweite Mitarbeiter, also Wert für Spalte Disponent/Team hinkommt. Es wird ja irgendwann automatisch eingefügt, auf Basis der Ergebnisse aus dem SQL. Da ist mir das Grid dann glaube lieber, das teste ich jetzt mal.

  • Zitat

    Die Variante von MrMurpy habe ich jetzt mal um eine Zeile erweitert, das sieht zwar gut aus, aber beim Umbruch passt nichts mehr und für mich ist es auch nicht einfach nachvollziehbar, wo dann der zweite Mitarbeiter, also Wert für Spalte Disponent/Team hinkommt.

    Das ist die natürliche Konsequenz, wenn fertiger Code ohne Erklärungen oder Kommentare gepostet wird: Die Probleme gehen los, wenn der Code erweitert oder an andere Gegebenheiten angepasst werden soll. Es hat schon seinen Grund, dass in den Forenregeln steht, dass das nicht erwünscht ist:

    Regeln „Hilfestellung im Forum“

    Wie war das noch mit dem Hungrigen, dem man einen Fisch schenkt? :-)

  • Das ist die natürliche Konsequenz, wenn fertiger Code ohne Erklärungen oder Kommentare gepostet wird: Die Probleme gehen los, wenn der Code erweitert oder an andere Gegebenheiten angepasst werden soll. Es hat schon seinen Grund, dass in den Forenregeln steht, dass das nicht erwünscht ist:

    Regeln „Hilfestellung im Forum“

    Wie war das noch mit dem Hungrigen, dem man einen Fisch schenkt? :-)

    Das fischen muss ich mir wohl selbst beibringen :-P

  • also, ich hab jetzt mal auf Grid umgebaut, das die col-größen jetzt von bootstrap kommen ist erstmal dahingestellt, wird ja au anderem Wege genauso gehen.


    HTML


    CSS:


    Javascript:


    Bin ich auf dem richtigen Weg, oder baue ich gerade etwas umständlich, wie ich Spalte 1 aus Reihe 2 wie auf die Größe von Reihe 1 bekomme?


    MfG


    Erik

  • Zitat

    Bin ich auf dem richtigen Weg, oder baue ich gerade etwas umständlich, wie ich Spalte 1 aus Reihe 2 wie auf die Größe von Reihe 1 bekomme?

    Offenbar möchtest Du die Höhe einheitlich machen und beim Durchsehen scheint mir das gangbar zu sein. IMO ist das aber erst in zweiter Linie wichtig, erst Mal dahin kommen, dass das Layout wieder so aussieht, wie Du es eingangs beschrieben hattest.


    Erst Mal rate ich dringend ab, zweigleisig zu fahren und Bootstrap und Flex/Grid gleichzeitig zu verwenden. Dann kannst Du nie sicher sein, ob dein Layout so aussieht wie es durch Flex/Grid eingerichtet wird oder ob Bootstrap es verfälscht.


    In deinem HTML hast Du dich an dem zeilenweisen Aufbau deines Layouts orientiert. Beim Gridlayout funktioniert das jedoch anders, Du musst die Elemente bzw. Grid-Items ohne Unterbrechung aneinander reihen. Der zeilenweise Aufbau entsteht dann dadurch, dass Du die Spalten z. B. durch grid-template-colums fest legst.

    CSS
    1. #fehlende-unterlagen {
    2. display: grid;
    3. /* Das Raster soll 9 Spalten bekommen */
    4. grid-template-columns: repeat(9, auto);
    5. margin-left: auto;
    6. margin-right: auto;
    7. margin-bottom: 2.5rem;
    8. }

    So bekommen wir ein Layout mit 9 Spalten und 2 Zeilen. Durch das Festlegen der Breite über auto werden die Breite entspr. Inhalt verteilt.

  • hey, klasse, das sieht schon ganz gut aus, aber ich habe im ersten Container 4 Spalten und in jeder Spalte ist ein weiteres div was wieder ein grid ist mit unterschiedlichen Spalten, klappt gut, aber, bei den anderen werden die Zeilen so derart groß, das es nicht schön aussieht:


    row-gap: 0; hat nichts gebracht


    HTML


    CSS::

  • Das liegt auch nicht an den Row-Gaps sondern daran, dass per Default die Spalten gestreckt werden, so dass sie die Höhe voll ausfüllen. Mit align-items: start; für den äußeren Container kannst Du das beheben:

    Code
    1. #dashboard-start-first {
    2. margin: 2rem;
    3. display: grid;
    4. grid-template-columns: repeat(4, auto);
    5. column-gap: 2.5rem;
    6. width: 95%;
    7. row-gap: 0;
    8. align-items: start;
    9. }

    BTW: Kennst Du schon die Entwicklerwerkzeuge und den HTML-Inspektor deines Browsers? Damit kannst Du dir sehr schön einen Überblick verschaffen, wie die Elemente angeordnet sind. Rechtsklick auf ein Element und "Element untersuchen".