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

Beitrag lesen

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

--
sumpsi - posui - obstruxi