calc: Feldlänge abhängig von width eines anderen tags

[Linuchs]

Moin,

da es in HTML keine Tabulatoren gibt, an denen der nächste Text beginnt, definiere ich ein div und danach geht's weiter.

form l, l {
  display: inline-block;
  position: relative;
  width: 12em;
  border: .1pt dotted transparent;
}

<p><l>###URL Panoramafoto###picture-URL###foto-URL###</l>
<input [disabled]
type        = "text"
name        = "bild_url"
title       = "bild_url"
maxlength   = 100
value       = "[bild_url]"
/></p>

So sieht's aus:

Nun möchte ich, dass das input-Feld den Platz bis zum gelben Rand nutzt. Wenn ich dem aber style = "width:100%" hinzufüge, sieht es so aus:

Ich muss also 100% abzüglich der Breite des l-Tags rechnen. Wie geht das, wie verweist calc auf ein anderes Eelement?

Gruß, Linuchs

[Gunnar Bittersmann]

@@Linuchs

da es in HTML keine Tabulatoren gibt, an denen der nächste Text beginnt

In CSS gibt es aber Grid. Und Flexbox.

definiere ich ein div und danach geht's weiter.

Im Danach ist von div nichts zu sehen.

Dafür aber das:

<p><l>###URL Panoramafoto###picture-URL###foto-URL###</l>
<input [disabled]
type        = "text"
name        = "bild_url"
title       = "bild_url"
maxlength   = 100
value       = "[bild_url]"
/></p>

Es gibt in HTML kein l-Element. Hatten wir letztens erst.

Eingabefeleder müssen eine zugängliche Beschriftung (label) haben. Hatten wir auch letztens erst.

Da du gegebene Hinweise ohnehin nicht umsetzt, ist es wohl sinnlos, dir weitere zu geben.

Da heute Sonntag ist, mach ich doch mal was Sinnloses.

Ich muss also 100% abzüglich der Breite des l-Tags rechnen.

Nein. Muss du nicht. In CSS gibt es … – s.o.

Wie geht das, wie verweist calc auf ein anderes Eelement?

Gar nicht.

Man kann, um das Kind DRY zu bekommen, Werte in custom properties ablegen.

😷 LLAP

[Linuchs]

Lieber Gunnar,

wenn du klar Stellung beziehen möchtest, schreibe doch einfach „geht nicht“ oder „weiß ich nicht“. Bei „weiß ich nicht“ wäre eine Antwort natürlich überflüssig.

Da du gegebene Hinweise ohnehin nicht umsetzt, ist es wohl sinnlos, dir weitere zu geben.

Danke, dass du trotzdem gegen den selbsterkannten Strom ackerst.

Ich bin kein sturer Schrat, wie du meinst. Mein Projekt hat dutzende von ineinander greifende Programme und includes. So sieht die Schaltzentrale für Admins aus. Vergrößere die mal. p002a ist noch von 2008:

Ich sehe das wie ein Puzzle oder Uhrwerk. Ich kann nicht beliebig an einem Rädchen schrauben, dann knallt es woanders. Ich denke, jeder von uns kennt das.

Es gibt in HTML kein l-Element. Hatten wir letztens erst.

Ja, eine ausgeuferte Diskussion mit diversen Meinungen, ob man eigene Tags „erfinden“ darf, wie sie heißen dürfen und ob sie später mit neu definierten, offiziellen tagNames zusammenstoßen.

Und dann die zentrale Frage dieses Fadens:

Wie geht das, wie verweist calc auf ein anderes Eelement?

Gar nicht.

Warum nicht gleich so?

[Gunnar Bittersmann]

@@Linuchs

Es gibt in HTML kein l-Element. Hatten wir letztens erst.

Ich sehe das wie ein Puzzle oder Uhrwerk. Ich kann nicht beliebig an einem Rädchen schrauben, dann knallt es woanders. Ich denke, jeder von uns kennt das.

Keine Ausreden! Wenn du alle l in label änderst (auch im Stylesheet), da kann nichts kaputtgehen.

Und wenn du die input-Elemente mit IDs ausstattest (jedes seine eigene eindeutige!) und die label-Elemente mit zugehörigen for-Attributen, kann auch nichts kaputtgehen.

---

Ja, eine ausgeuferte Diskussion mit diversen Meinungen, ob man eigene Tags „erfinden“ darf, wie sie heißen dürfen und ob sie später mit neu definierten, offiziellen tagNames zusammenstoßen.

Jeder hat ein Recht auf eine eigene Meinung. Aber nicht auf eigene Fakten.

😷 LLAP

[Tabellenkalk]

Hallo,

Wenn du alle l in label änderst (auch im Stylesheet), da kann nichts kaputtgehen.

D.h. aus allen <ul><li>s werden <ulabel><labeli>s?

scnr

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Wenn du alle l in label änderst (auch im Stylesheet), da kann nichts kaputtgehen.

D.h. aus allen <ul><li>s werden <ulabel><labeli>s?

Das ist nicht listig.

😷 LLAP

[Rolf B]

Hallo Linuchs,

zum einen sind deine CSS Selektoren merkwürdig. ˋform l, lˋ - der erste der Auflistung ist redundant. Hast Du l Elemente außerhalb des Forms?

Sehe ich das richtig, dass Du jede Input-Gruppe in ein p Element einschließt? Du zeigst uns für das p Element kein CSS, aber ich wette, da gibt's welches.

Mal angenommen, ˋform pˋ sei der Selektor dafür. Dann könntest Du zunächst dein URL Inputfeld von type=text auf das richtigere type=url ändern und im CSS dies ergänzen:

form p {
   ... /* existierende Eigenschaften */
   display: flex;
}

form p > input[type=url] {
   flex: 1 0 auto;
}

Damit werden alle URL Eingabefelder auf die verfügbare Breite gedehnt. Wenn Du auch echte Textfelder hast, die diese Dehnung brauchen, wirst Du dafür wohl noch eine Klasse setzen und den Selektor oben entsprechend ergänzen müssen.

Welche Auswirkungen das auf den Rest deiner Forms hat, kann ich nicht beurteilen; ich nehme an, dieser Teil von remso ist für Admins.

An Stelle von Flexbox könnte man auch ein Grid-Layout für das ganze Form überlegen, aber dann musst Du deine p-Gruppen wegnehmen (weil Grid ohne Subgrid nur auf direkte Kindelemente des Grid-Containers angewendet werden kann und Microsoft/Google mit Subgrid nicht aus den Puschen kommen). Bis man mit Subgrid ordentlich arbeiten kann, wird es wohl noch was dauern. Und ein Grid-Layout für eine Zeile ist eigentlich eine Spatzenkanone.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Wenn Du auch echte Textfelder hast, die diese Dehnung brauchen, wirst Du dafür wohl noch eine Klasse setzen und den Selektor oben entsprechend ergänzen müssen.

Klasse? Warum?

input:not([type]), input[type="text"] { … }

---

An Stelle von Flexbox könnte man auch ein Grid-Layout für das ganze Form überlegen, aber dann musst Du deine p-Gruppen wegnehmen (weil Grid ohne Subgrid nur auf direkte Kindelemente des Grid-Containers angewendet werden kann […]).

Wirklich?

form p { display: contents }

Chromium hat den Bug damit wohl gefixt; Safari noch nicht. [Can I Use]

😷 LLAP

[Rolf B]

Hallo Gunnar,

Warum?

Weil ich davon ausging, dass es auch Textfelder geben könnte, die die Dehnung nicht bekommen sollen. Wenn das nicht der Fall ist, kann man natürlich auch einfach alle Text-Felder dehnen.

Wirklich?

Ahja, das Ding ist so neu, das vergesse ich ständig. Aber wie muss man dann die Seite gestalten, dass sie in nicht-unterstützenden Brausern noch halbwegs anständig aussieht?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ahja, das Ding ist so neu, das vergesse ich ständig.

5…6 Jahre – das muss dieses Neuland sein, von dem immer die Rede ist.

😷 LLAP

[Rolf B]

Hallo Gunnar,

in Chromia funktionsfähig seit März 2021. Da der Fuchs seinen Marktanteil beständig abbaut, ist eine Eigenschaft, die nur im Fuchs funktioniert, leider von rein akademischer Relevanz.

Jaja, ist gut, ich bin halt nicht überall uptodate. Das ist das Problem von Multifullstack-Entwicklern, die können alles, aber nichts richtig.

Rolf

[Der Martin]

Hallo Rolf,

Das ist das Problem von Multifullstack-Entwicklern, die können alles, aber nichts richtig.

also genau wie Outlook.

Live long and pros healthy,
 Martin