CSS - Div aus dem Ankern lösen

[Lowterm]

Hallo zusammen,

ich habe folgendes Problem.

Auf einer Seite gibt es eine Tabelle, die anfänglich über drei Spalen verfügt. Die Spalten können dxnamisch bliebig oft nach rechts hizugefügt werden. Da die Tabelle in einem div-Element mit einer festen Breite von ca. 350px platziert ist, bekommt es bei einem Tabllen/Spalten Überlauf einen horizontalen Scrollbalken.

Um das permanente Scrolling zu erleichtern, habe ich mir gedacht, per css das besagte div-Element per Konpfdruck aus dem Ankern zu lösen und diese in voller Bildschirmbereite anzuzeigen. Ich weiß, dass dies eventuell auf Umwege machbar ist. Ich weiß aber nicht, wonach ich suchen muss und wie die etwaige Lösung aussieht. Gruß

[Gunnar Bittersmann]

@@Lowterm

ich habe folgendes Problem.

Auf einer Seite gibt es eine Tabelle, die anfänglich über drei Spalen verfügt. Die Spalten können dxnamisch bliebig oft nach rechts hizugefügt werden. Da die Tabelle in einem div-Element mit einer festen Breite von ca. 350px platziert ist

Da ist dein Problem. Entferne die Breitenangabe.

Um das permanente Scrolling zu erleichtern, habe ich mir gedacht, per css das besagte div-Element per Konpfdruck aus dem Ankern zu lösen und diese in voller Bildschirmbereite anzuzeigen.

Warum ist das div nicht gleich in voller Breite?

IIRC sollte das Ding role="group" haben.

Ich weiß, dass dies eventuell auf Umwege machbar ist. Ich weiß aber nicht, wonach ich suchen muss und wie die etwaige Lösung aussieht.

Konpf heißt Knopf heißt Button.

Auf Konpfdruck schaltest du dessen aria-expanded-Attribut zwischen "false" und "true" um. Anhand dessen setzt du die Breitenangabe des div zurück.

☞ Beispiel

Kwakoni Yiquan

[Lowterm]

Hallo,

danke.

Da ist dein Problem. Entferne die Breitenangabe.

Warum ist das div nicht gleich in voller Breite?

Aufgrund des einheitlichen Seitendesigns können die Breitenangaben nicht entfernt werden. Sonst wäre das Problem ja gar keins.

Danke für dein Beispiel. Funktioneirt bei mir aber nur unetr Chrome. Das Hilft aber auch nicht ganz. Um das div-Element befinden sich leider weitere Element, die alle aufgrund des Designs eine feste Größe haben. Ich soll daher einen Weg finden, das div-Element hevorzuheben und in die volle Breite setzen, so dass es über alle anderen Elemente liegt. Gruß

[Gunnar Bittersmann]

@@Lowterm

Warum ist das div nicht gleich in voller Breite?

Aufgrund des einheitlichen Seitendesigns können die Breitenangaben nicht entfernt werden.

Dann ändert eben das Seitendesign. Form follows function.

Danke für dein Beispiel. Funktioneirt bei mir aber nur unetr Chrome.

Funktioniert problemlos in Firefox und Safari.

Das Hilft aber auch nicht ganz. Um das div-Element befinden sich leider weitere Element, die alle aufgrund des Designs eine feste Größe haben. Ich soll daher einen Weg finden, das div-Element hevorzuheben und in die volle Breite setzen, so dass es über alle anderen Elemente liegt.

Dann mach das doch.

Kwakoni Yiquan

[Lowterm]

Ich bin nicht sehr oft hier. Ich bin aber immer wieder überrascht, wie freundlich alle hier sind!

[Gunnar Bittersmann]

@@Lowterm

Ich bin nicht sehr oft hier.

Aber oft genug um zu wissen, dass man ohne Problembeschreibung keine Lösung erwarten kann‽ (Dazu müsste man auch noch gar nicht hier gewesen sein, dass sollte einem der gesunde Menschenverstand sagen.)

„Um das div-Element befinden sich leider weitere Element“ (welche wir nicht zu sehen bekommen), ist keine brauchbare Problembeschreibung.

Kwakoni Yiquan

[Rolf B]

Hallo Lowterm,

Funktioneirt bei mir aber nur unetr Chrome.

Gunnar hat nested selectors verwendet. Welcher Browser genau (incl. Version!) verhält sich nicht wie erwartet? Die Unterstützung von & in nativem CSS ist relativ neu.

Um das div-Element befinden sich leider weitere Element, die alle aufgrund des Designs eine feste Größe haben.

Dann sollte das div-Element mit position:absolute aus dem normalen Flow herausgenommen werden (was hoffentlich das Layout drumherum nicht kollabieren lässt). Wenn Du dem div dann width:90vh und left:5vh gibst, hat es danach 90% der Fensterbreite und ist horizontal zentriert. Wenn Du die top-Eigenschaft nicht setzt, sollte es sich vertikal nicht verschieben. Destruktiv könnte höchstens eine position:relative-Angabe weiter oben im DOM-Tree wirken, die den Bezugspunkt für left verschiebt, das musst Du dann ggf. nachjustieren.

Ich bin aber immer wieder überrascht, wie freundlich alle hier sind!

Wir sind immer wieder überrascht, mit wie wenig Informationen wir komplexe Probleme lösen sollen. Das kann dann zu Genervtheit führen. Deine „Vertipperflut“ nervt ebenfalls. Das sind Dreher, fehlende Buchstaben und "eins daneben" Fehler, das ist keine Rechtschreibschwäche, sondern blindes, unüberprüftes Draufloshacken. Wenn Du keine Zeit für deine Beiträge hast, haben wir auch keine Zeit, deine Bedürfnisse zu erraten.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Dann sollte das div-Element mit position:absolute aus dem normalen Flow herausgenommen werden

Nein. Ohne Kenntnis der Lage kann nicht zu absoluter Positionierung geraten werden.

Absolute Positionierung sollte man wegen ihrer schädlichen Nebenwirkungen nur in Ausnahmenfällen einsetzen, also so gut wie nie.

(was hoffentlich das Layout drumherum nicht kollabieren lässt).

Eben; für diese Hoffnung fehlt die Grundlage.

Kwakoni Yiquan

[Lowterm]

Hallo,

danke. Es handelt sich um die aktuellste Firefox-Version:

Firefox Extended Support Release 115.10.0er (64-Bit)

Könnte man die Funktionalität mit reinem CSS erreichen? JavaScript kann bei mir zu Problemen führen.

Gruß

[Gunnar Bittersmann]

@@Lowterm

Könnte man die Funktionalität mit reinem CSS erreichen?

Ja: resize

JavaScript kann bei mir zu Problemen führen.

Na dann halt ohne Button.

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Lowterm

Könnte man die Funktionalität mit reinem CSS erreichen?

Ja. Auch mit Elementen links und rechts daneben. Noch irgendwelche Informationen, die du uns verschweigst?

Aufziehen der Tabelle nach rechts geht: Codepen. Nach links: ?

JavaScript kann bei mir zu Problemen führen.

?? Die da wären?

Kwakoni Yiquan

[Robert B.]

Moin Lowterm,

Es handelt sich um die aktuellste Firefox-Version:

Firefox Extended Support Release 115.10.0er (64-Bit)

das ist vermutlich das aktuellste Firefox-ESR, denn ich habe hier 125.0.3 als aktuellste Version.

Viele Grüße
Robert

[Lowterm]

Hallo Rolf,

danke nochmals für deine Hilfe. Ich bin dank deiner Hilfe etwas weitergekommen. Allerdings hat sich herausgestellt, dass der Scrollbalken zu der Tabelle und nicht zum div-Element drumherum gehört. Mit position:absolute wird die Tabelle nun aus dem normalen Flow herausgenommen, wie du gesagt hast. Das reicht, um den Scrollbalken verschwinden zu lassen. Ich bekomme die Tabelle aber leider nicht zentriert, egal welche css-Angaben ich mache. Die zentrierte Position sollte auch beibehalten werden, wenn der Browserfenster sich horizontal verkleinert. Danke

[Rolf B]

Hallo Lowterm,

Allerdings hat sich herausgestellt, dass der Scrollbalken zu der Tabelle und nicht zum div-Element drumherum gehört.

Äh, eine Tabelle mit Scrollbar? Das gelingt mir nicht. Ich kann einen Scrollbar in einem th oder td Element erzeugen, aber nicht für's table Element.

Wenn Du einen Scrollbar siehst, sollte er zum Elternelement gehören. Vielleicht nicht zu dem, bei dem Du es erwartest?

Ich bekomme die Tabelle aber leider nicht zentriert, egal welche css-Angaben ich mache.

Hm, vermutlich hast Du die richtigen Angaben nicht gemacht.

Aber ohne die Seite zu sehen, kann ich Dir da auch nicht wirklich raten. Was „richtig“ ist, hängt vom Kontext ab.

Gunnars Idee, die Table resizable zu machen, hilft nicht?

Rolf

[Lowterm]

Hallo,

danke. Ich habe es hinbekommen:

position: absolute; 
z-index: 10; 
left: 50%; 
transform: translateX(-50%);

Allerdings so werden nun alle Table-Elemente, die dynamisch erzeugt worden sind, angesprochen. Ich muss daher per Angular einen Weg finden, die einzelnen Elemente auseinanderzuhalten. Danke

[Gunnar Bittersmann]

@@Lowterm

position: absolute; 
z-index: 10; 
left: 50%; 
transform: translateX(-50%);

Das war irgendwann in grauer Vorzeit mal die einzige(?) Methode, etwas zu zentrieren. Und damit auch die dümmste.

Heute ist es nur noch die dümmste.

Kwakoni Yiquan

[Matthias Scharwies]

Servus!

position: absolute; 
z-index: 10; 
left: 50%; 
transform: translateX(-50%);

Das war irgendwann in grauer Vorzeit mal die einzige(?) Methode, etwas zu zentrieren. Und damit auch die dümmste.

Heute ist es nur noch die dümmste.

im Wiki: Inhalte_zentrieren

#inhalte-werden-zentriert {
  display: flex;
  align-items: center;
  justify-content: center;
}

Herzliche Grüße

Matthias Scharwies

[Lowterm]

Hallo Matthias,

danke. In meinem Fall funktioniert das leider nicht. Eventuell, weil es hier um ein Table-Element an sich geht und nicht um den Inhalt eines Elements. Ich bin auch alle anderen Beispiele in deinem Link durchgegangen. Keine funktioniert leider.

Gruß

[Matthias Scharwies]

Servus!

Hallo Matthias,

danke. In meinem Fall funktioniert das leider nicht. Eventuell, weil es hier um ein Table-Element an sich geht und nicht um den Inhalt eines Elements.

Das table-Element muss das Kindelement sein. Wenn du etwas zentrieren willst, gehst du doch vom Elternelement aus, das sich über eine gewisse Breite – z.B. den Vieport oder 1000px erstreckt. table ist das Kind, dass sich nicht über die gesamte Breite erstrecken, sondern einen Teil der Gesamtbreite einnehmen soll und der Rand rechts und links gleichbreit ist.

Nimm mal dieses Beispiel: Tabellen/Gestaltung_mit_CSS#CSS-Grundeinstellungen

Mach um eine Table ein div mit den Angaben von oben und schon ist die table zentriert.

Ich bin auch alle anderen Beispiele in deinem Link durchgegangen. Keine funktioniert leider.

Wie gesagt, das geht auch bei Tabellen!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

im Wiki: Inhalte_zentrieren

Das steht Unsinn drin: „Zentrieren_mit_line-height: Sie können Text in einem Container vertikal zentrieren, wenn Sie die Linienhöhe entsprechend einstellen.“

Im Kleingedruckten steht zwar, dass man das nicht tun sollte, aber wer liest das schon?

Kann der Abschnitt ersatzlos entfernt werden? Oder sollte ein Abschnitt daruf hinweisen, dass man line-height niemals zum vertikalen Zentrieren missbrauchen sollte? Der darf dann aber nicht mit „Sie können Text in einem Container vertikal zentrieren“ beginnen.

Kwakoni Yiquan

PS: Übrigens ist „Linienhöhe“ eine falsche Übersetzung aus dem Englischen. Es heißt Zeilenhöhe.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

im Wiki: Inhalte_zentrieren

Das steht Unsinn drin

Auch im Abschnitt zu absoluter Positionierung steht Unsinn: „bietet sich eine Lösung mit absoluter Positionierung an“.

Nein. Die Lösung bietet sich nicht an. Ein Grund steht im Kleingedruckten darunter, aber wer liest das schon?

Kann auch dieser Abschnitt ersatzlos entfernt werden? Vermutlich nicht, denn es wäre besser, eindrücklich vor dieser Variante zu warnen. Der müsste dann so in der Art beginnen: „Die oft noch im Web anzutreffende Zentrierung mittels absoluter Positionierung sollte nicht verwendet werden – aus folgenden Gründen: …“

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Matthias Scharwies

im Wiki: Inhalte_zentrieren

#inhalte-werden-zentriert {
  display: flex;
  align-items: center;
  justify-content: center;
}

Da ist das Wiki wohl nicht auf neuem Stand. Das geht einfacher:

.box {
	display: grid;
	place-content: center;
}

☞ Beispiel

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

wenn man Einfluss auf das HTML drumherum hat, ist die left:50%; translateX:-50% Methode sicherlich eine schlechte Wahl.

Aber Lowterm hat schon mehrfach gesagt, dass er den nicht hat. Sein Vorgehen ohne Kenntnis des Kontexts als dumm zu bezeichnen ist unfair und die Wortwahl erst recht. Dafür mein Minus.

Dass Lowterm uns sehr helfen würde, wenn er über seinen Kontext mittels einer online gestellten HTML Seite, die das Problem demonstriert, aufklärte, ist unbestritten.

Um nun nicht ganz dumm zu sein, habe ich mal versucht, eine Lösung mit dem Popover-API zu finden. Das geht tatsächlich - ist für Lowterm aber keine einfache Lösung, weil er FF ESR 115.10 verwendet. Das ist immerhin aktueller als der, den mir mein Arbeitgeber hinstellt, aber nicht aktuell (das wäre die 125er Version) und leider wurde Popover erst vor 2 Wochen im FF 125 veröffentlicht. Unser Wiki-Artikel zu Popover verweist aber auch auf einen Polyfill. Den muss man sich genau anschauen, weil er zwei bis drei Dinge anders macht (machen muss) als natives Popover.

https://jsfiddle.net/Rolf_b/c1e64k35/

Vermutlich suboptimal, scheint aber zumindest in Chromia den gewünschten Effekt zu haben. Wie sich das in eine Angular-Umgebung einfügt, ist natürlich eine andere Frage. Ich habe das jetzt mit einer Grid-Cell gemacht, das ist aber nicht zwingend und dient nur dazu, die überbreites Tabelle in eine zu kleine Zelle zu sperren.

Rolf

[Gunnar Bittersmann]

@@Rolf B

wenn man Einfluss auf das HTML drumherum hat, ist die left:50%; translateX:-50% Methode sicherlich eine schlechte Wahl.

Aber Lowterm hat schon mehrfach gesagt, dass er den nicht hat.

?? Du hast den Thread verwechselt‽

Sein Vorgehen ohne Kenntnis des Kontexts als dumm zu bezeichnen ist unfair

Nö. Ich lehne mich mal aus dem Fenster und sage: Zentrierung mit absoluter Positionierung ist in jedem Kontext eine schlechte Wahl.

und die Wortwahl erst recht.

Ob man eine schlechte Implementierung nun schlecht, blöd oder dumm nennt …

Dass Lowterm uns sehr helfen würde, wenn er über seinen Kontext mittels einer online gestellten HTML Seite, die das Problem demonstriert, aufklärte, ist unbestritten.

Lowterm würde damit sich helfen, denn dann könnten wir antworten. Bislang können wir bestenfalls mutmaßen.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

?? Du hast den Thread verwechselt‽

Ich dachte, nicht. Mir kamen Lowterms Aussagen so vor, als ob das HTML oder zumindest das Umfeld der Tabelle in eckigen Stein gemeißelt wäre. Hinzu kommt der veraltete ESR-Firefox (wogegen man sich in einem Großunternehmen nicht wehren kann).

Jedenfalls dürfte es schwierig werden, in einer existierenden Gesamtlösung das HTML so umzubauen, dass diese eine Tabelle mit brauchbaren Mitteln aus dem Layout herausspringt. Dein Spott über die nicht existierenden User, die erst das Layout bewundern und dann den Inhalt betrachten, ist deshalb unangebracht. Je nach Projektgröße, -komplexität und -richtlinien kann man nicht eben mal eine Seite umbauen. Auch bei uns gibt es Großanwendungen im Intranet, deren Rahmen-HTML in Beton gegossen ist. Das mag bei Dir anders sein, keine Ahnung.

Aber unterm Strich sitzen wir zwei vor unseren Milchglaskugeln und können nur raten, welche Möglichkeiten Lowterm hätte und welche nicht. Mein Eindruck ist: er hat einen "mach mal eben" Auftrag und ein größerer Umbau des HTML ist nicht im Budget des Auftraggebers (von denen es in Großanwendungen in Großunternehmen mehr als einen gibt - ich weiß, wovon ich rede).

Rolf

[Robert B.]

Moin Rolf,

können wir diesen Satz,

Wenn Du keine Zeit für deine Beiträge hast, haben wir auch keine Zeit, deine Bedürfnisse zu erraten.

nicht „in Stein übers Eingangstor meißeln“?

Viele Grüße
Robert

[Gunnar Bittersmann]

@@Lowterm

Warum ist das div nicht gleich in voller Breite?

Aufgrund des einheitlichen Seitendesigns können die Breitenangaben nicht entfernt werden.

„Ich möchte zunächst das Seitenlayout genießen und dann den Knopf suchen, den ich drücken muss, um die Inhalte angezeigt zu bekommen.“
— kein Nutzer, jemals

Kwakoni Yiquan