GRID allgemein und resize geht nicht bei DIV

[Henry]

Hallo,

Ein Element wie DIV lässt sich doch normalerweise durch RESIZE größenänderbar machen. Funktioniert aber scheinbar nicht bei GRID so einfach?

das Beispiel funktioniert einigermaßen, wie ich möchte. Aber auch wenn das Ergebnis für mich stimmt, so bin ich sicher, dass im Lösungsweg viele Fehler stecken, weil vieles nur durch Try&Error. Daher einige Fragen:

Eigentlich wollte ich die DIV horizontal ändern können.

.item3 { grid-area: main;resize:horizontal;}

btw. warum hat das Codefeld hier eigentlich immer eine Scrollleiste, auch wenn gar nicht nötig? Sieht irgendwie unschön aus.

Da das aber nicht fuktioniert, habe ich mir beholfen, indem ich ein Textfeld eingebaut habe, was ja von Haus aus streckbar ist und das funktioniert dann auch, nur eben leider als Notlösung. Geht doch irgendwie das DIV auch streckbar darin zu machen?

Bei dem Textfeldeinbau gabs zu Anfang auch ein Problem, verbreitern ging, kleiner auch, aber das DIV passte sich dann nur teilweise auf klein an. Daher habe ich das gemacht:

grid-template-columns: auto 1fr 1fr;

seltsam jetzt ohne scrollbalken, hmm

Aber ist diese Aufteilung/Lösung OK?

Überhaupt Aufteilung. Die Höhe sollte 100% Viewport sein, wobei die mittlere Reihe sich in die Höhe strecken soll. Da dachte ich zuerst gebe ich oben und unten einen Wert von zb. 5vh und in der Mitte auto.

grid-template-rows: 5vh auto 5vh;

funktionierte aber nicht, weil dann grösserer Text oben/unten aus dem Raster ausbrach. Da habe ich es dann umgekehrt probiert und die mitte mit einem Vergleichswert von 20fr beziffert, wobei auch 20, 15 oder sonstwas funktioniert. Gehts zwar, aber;Gibt bestimmt einen richtigeren/besseren Weg?

grid-template-rows: auto 20fr auto;

Gruss
Henry

[Matthias Scharwies]

Servus!

Ein Element wie DIV lässt sich doch normalerweise durch RESIZE größenänderbar machen. Funktioniert aber scheinbar nicht bei GRID so einfach?

Ich hab jetzt erst mal nachlesen müssen: Sowohl SELF-Wiki als auch MDN verweisen daruf, dass resize nur geht, wenn overflownicht visible (Der default-Wert) ist. Deshalb würde ich erst einmal overflow: auto setzen.

das Beispiel funktioniert einigermaßen, wie ich möchte. Aber auch wenn das Ergebnis für mich stimmt, so bin ich sicher, dass im Lösungsweg viele Fehler stecken, weil vieles nur durch Try&Error. Daher einige Fragen:

Eigentlich wollte ich die DIV horizontal ändern können.

.item3 { grid-area: main;resize:horizontal;}

Ich würde resize nur verwenden, wenn ich ein Element habe, das wie ein leeeres textarea erst einmal klein und dann beim Ausfüllen groß gezogen werden soll. Ich habe das im Self-Wiki einmal mit float und begleitendem Text nachgebaut:

CSS/Eigenschaften/resize

Jetzt nimmst Du Grid Layout und sagst dem Browser, dass er sich um die Einteilung der Seite kümmern soll. Er nimmt die Elemente aus dem „normalen“ Elementfluss und überlegt anhand Deiner Werte und des Inhalts, wie er sie platzieren soll.

Ich habe die Textarea mal verkleinert:

.grid-container {
  grid-template-columns: auto 1fr 1fr;
}

textarea{width:10em; margin-right:5em;resize:horizontal;height:100%;border:none;}

Das sagt dem Browser, dass das .item2 auf auto gestellt ist. Hier verlasse ich mich auf die MDN: Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

1fr 1fr teilt den übrigen Raum auf die beiden anderen divs auf. Genau wie erwartet.

Wenn Du jetzt das textarea-Element, den Inhalt der Rasterzelle vergrößerst, vergrößert sich auch das div.item2 und die anderen werden entsprechend kleiner, bis sie so groß wie ihr Inhalt (min-content) werden und dann nach außerhalb des Viewports wandern (Scrollbalken inklusive).

Da das aber nicht fuktioniert, habe ich mir beholfen, indem ich ein Textfeld eingebaut habe, was ja von Haus aus streckbar ist und das funktioniert dann auch, nur eben leider als Notlösung. Geht doch irgendwie das DIV auch streckbar darin zu machen?

Nur wenn es keine Rasterzelle im Grid Layout ist. Das Grid Layout richtet sich imho nach dem Inhalt und ignoriert weitere Größenangaben.

Ein div innerhalb der Rasterzelle geht:

  <div class="item2"><div class="textarea"></div></div>

Ganz schön viele divs hier. Mit header, footer und aside hätte man hier wsl. mehr Übersicht geschaffen.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Nur wenn es keine Rasterzelle im Grid Layout ist. Das Grid Layout richtet sich imho nach dem Inhalt und ignoriert weitere Größenangaben.

Jein. Wenn die Grid-Zelle, in der sich das Element befindet, für row oder column template den Wert auto hat, dann folgt tatsächlich das Grid der Größe, die ich mit resize auswähle.

Trotzdem ist das von hinten durch die Brust ins Auge. Henry will nicht ein div resizen.

• Die visuelle Darstellung ist irreführend. resize:horizontal erzeugt ein resize-Handle unten rechts in der Ecke, das einen full resize suggeriert
• Die initiale Breite richtet sind nach dem Inhalt des div, weil das column-Template auf auto stehen muss

Aus meiner Sicht haben wir hier das typische A/B Problem.

Problem A: Henry beabsichtigt hier eine Spaltendarstellung, bei der die Spaltenbreite vom Benutzer verändert werden kann.
Lösungsidee: resize:horizontal
Problem B: resize und grid beißen sich. Hilfe!

Man sollte sich auf die Lösung von A konzentrieren und B verwerfen. Ansatzpunkt ist das Grid, nicht die Grid-Inhalte. Ich befürchte nur, dass man das ohne JavaScript nicht GUT lösen kann. Hier ist ein Codepen, wo das jemand gemacht hat.

Rolf

[Henry]

Hallo Rolf,

Aus meiner Sicht haben wir hier das typische A/B Problem.

Problem A: Henry beabsichtigt hier eine Spaltendarstellung, bei der die Spaltenbreite vom Benutzer verändert werden kann.

Genau.

Lösungsidee: resize:horizontal

Ja.

Problem B: resize und grid beißen sich. Hilfe!

Sieht so aus.

Man sollte sich auf die Lösung von A konzentrieren und B verwerfen. Ansatzpunkt ist das Grid, nicht die Grid-Inhalte. Ich befürchte nur, dass man das ohne JavaScript nicht GUT lösen kann. Hier ist ein Codepen, wo das jemand gemacht hat.

Ja es gibt einige Beispiele in dieser Richtung und leider alle durch Scripte, daher wollte ich einen anderen Weg versuchen.

Gruss
Henry

[Matthias Scharwies]

Servus!

funktionierte aber nicht, weil dann grösserer Text oben/unten aus dem Raster ausbrach. Da habe ich es dann umgekehrt probiert und die mitte mit einem Vergleichswert von 20fr beziffert, wobei auch 20, 15 oder sonstwas funktioniert. Gehts zwar, aber;Gibt bestimmt einen richtigeren/besseren Weg?

grid-template-rows: auto 20fr auto;

Ja, auto bezeichnet (wie in der vorherigen Antwort) ja die Mindestgröße des Inhalts. Den verfügbaren Raum in der Mitte willst du den verbleibenden Zellen zuweisen. Da musst du keine 15 oder 20 fr-Teile nehmen, sondern kannst den Wert auf 1 setzen:

<style>
body {
height:100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto auto auto;
	gap: 10px;
	background-color: #2196F3;
}

body > * {
  background-color: rgba(255, 255, 255, 0.8);
}

header, footer {grid-column: 1/ -1;}

</style>
</head>

<body>
  <header><h1>Header</h1></header>
  <div class="item2"><textarea>Input</textarea></div>
  <div class="item3">Main</div>  
	<aside>Mainx</aside> 
  <footer><h3>Footer</h3></footer>
</body>

Ich habe mal einige der divs durch header, footer und aside ersetzt, den div.grid-container gestrichen und das CSS aufgeräumt. Grid macht ja viel automatisch; also benötigst Du nur die Festlegung für header und footer, damit sie über die gesamte Breite gehen.

Herzliche Grüße

Matthias Scharwies

[Henry]

Hallo Matthias,

ja das ist aufgeräumter als meine um eine Zeile erweiterte Vorlage, bringt aber wieder einen anderen Nachteil mit, dass sich die Höhe von Header und Footer nicht anpasst, wenns da grösser wird, entsteht Scoll. Muss ich gleich mal schauen, wie das bei deinem Beispiel zu ändern wäre.

Gruss
Henry

[Matthias Scharwies]

Servus!

Hallo Matthias,

ja das ist aufgeräumter als meine um eine Zeile erweiterte Vorlage, bringt aber wieder einen anderen Nachteil mit, dass sich die Höhe von Header und Footer nicht anpasst, wenns da grösser wird, entsteht Scoll. Muss ich gleich mal schauen, wie das bei deinem Beispiel zu ändern wäre.

der body hat ja eine margin - ich hatte Deine Normalisierung vergessen:

* { margin: 0;}

Herzliche Grüße

Matthias Scharwies

[Henry]

Hallo Matthias,

der body hat ja eine margin - ich hatte Deine Normalisierung vergessen:

* { margin: 0;}

Schnell und Schmerzlos, ja das wars, danke.

Zusammenfassend nochmal zu den anderen Punkten und Antworten der anderen, das Aussengerüst bei Grid ist nie resizable, es sei denn durch Scripte. Richtig soweit?

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

* { margin: 0;}

Schnell und Schmerzlos, ja das wars, danke.

Für das Beispiel mag das sinnvoll sein, im Allgemeinen ist so ein Reset keine gute Idee.

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

Hallo Matthias,

der body hat ja eine margin - ich hatte Deine Normalisierung vergessen:

* { margin: 0;}

Schnell und Schmerzlos, ja das wars, danke.

Zusammenfassend nochmal zu den anderen Punkten und Antworten der anderen, das Aussengerüst bei Grid ist nie resizable, es sei denn durch Scripte. Richtig soweit?

Nein, @Rolf B hatte mich korrigiert / ergänzt, wenn beide Dimensionen auf auto stehen.

body {
height:100vh;
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto auto auto;
	gap: 10px;
	background-color: #2196F3;
}

body > * {
  background-color: rgba(255, 255, 255, 0.8);
}

.item2   {
	overflow: auto; /* muss gesetzt werden! */
	resize: both;
}

Herzliche Grüße

Matthias Scharwies

[Linuchs]

Moin,

wenn wir schon beim Thema resize sind. Kann der Nutzer die Breite von Tabellenspalten verändern?

Wenn ja, wo finde ich eine Code-Beispiel?

Linuchs

Edit: Schon selbst was gefunden: https://htmldom.dev/resize-columns-of-a-table/

[Matthias Scharwies]

Servus!

Moin,

wenn wir schon beim Thema resize sind. Kann der Nutzer die Breite von Tabellenspalten verändern?

Wenn ja, wo finde ich eine Code-Beispiel?

• https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:Tabellen1.html#view_result

Ich habe es ausprobiert. Die Tabelle selbst bleibt starr. Ein div innerhalb einer Tabellenzelle geht und verändert auch die Tabelle.

div {
	resize: both;
	overflow:auto;
}

Linuchs

Edit: Schon selbst was gefunden: https://htmldom.dev/resize-columns-of-a-table/

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Henry,

.item3 { grid-area: main;resize:horizontal;}

btw. warum hat das Codefeld hier eigentlich immer eine Scrollleiste, auch wenn gar nicht nötig? Sieht irgendwie unschön aus.

grid-template-columns: auto 1fr 1fr;

seltsam jetzt ohne scrollbalken, hmm

Das eine ist die Codeauszeichnung als Codeblock, das andere als Inline-Code. In der Hilfe (das rote Fragezeichen über der Textarea) sind die Unterschiede beschrieben.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

btw. warum hat das Codefeld hier eigentlich immer eine Scrollleiste, auch wenn gar nicht nötig? Sieht irgendwie unschön aus.

da ist overflow-x: scroll gesetzt um ungewollte Zeilenumrüche oder das aus dem Block ragen zu vermeiden. Man müsste mal mit vielen verschiedenen Beispielen testen, ob auch andere Angaben zielführend sind. Der ausgegraute Scrollbalken sieht in der Tat nicht sonderlich schön aus. overflow-x: auto könnte ich mir vorstellen. Aber vielleicht hat das Nebenwirkungen.

Bis demnächst
Matthias

[Henry]

Hallo Matthias,

Das eine ist die Codeauszeichnung als Codeblock, das andere als Inline-Code. In der Hilfe (das rote Fragezeichen über der Textarea) sind die Unterschiede beschrieben.

Ja richtig, aber dann manuell weil der Button </> erkennt das nicht automatisch.

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

Ja richtig, aber dann manuell weil der Button </> erkennt das nicht automatisch.

Er bemüht sich aber. Und wenn er keine Rückmeldung von dir bekommt, dass er was falsch gemacht hat, kann er aus seinen Fehlern auch nicht lernen.

Bis demnächst
Matthias

[Auge]

Hallo

Hallo Matthias,

Das eine ist die Codeauszeichnung als Codeblock, das andere als Inline-Code. In der Hilfe (das rote Fragezeichen über der Textarea) sind die Unterschiede beschrieben.

Ja richtig, aber dann manuell weil der Button </> erkennt das nicht automatisch.

Doch tut er. Gibt es vor und hinter dem markierten Code Zeilenumbrüche, wird ein Codeblock erzeugt, der mit jeweils drei Tilden eingefasst wird.

body { margin: 0; }

Steht der markierte und als Code auszuzeichnende Abschnitt vor, innerhalb oder hinter anderen Nichtumbruchzeichen in der selben Zeile, wird der Abschnitt in Backticks (für Inlinecode) eingeschlossen.

body { margin: 0; } will ich schreiben.
Eventuell sollte es auch body { margin: 0; } sein.
Oder ich schreibe body { margin: 0; }.

Alle drei Inlinecodebeispiele wurden mit dem Code-Button und nicht durch händische Eingabe der Steuerzeichen ausgezeichnet.

Tschö, Auge