tag:forum.selfhtml.org,2005:/self calc: Feldlänge abhängig von width eines anderen tags – SELFHTML-Forum 2021-09-24T17:31:01Z https://forum.selfhtml.org/self/2021/sep/19/calc-feldlange-abhangig-vom-vorangehenden-tag/1791718#m1791718 Linuchs 2021-09-19T11:58:25Z 2021-09-19T11:59:31Z calc: Feldlänge abhängig von width eines anderen tags <p>Moin,</p> <p>da es in HTML keine Tabulatoren gibt, an denen der nächste Text beginnt, definiere ich ein div und danach geht's weiter.</p> <pre><code class="block language-css"><span class="token selector">form l, l</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 12em<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> .1pt dotted transparent<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>l</span><span class="token punctuation">></span></span>###URL Panoramafoto###picture-URL###foto-URL###<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>l</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">[disabled]</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>bild_url<span class="token punctuation">"</span></span> <span class="token attr-name">title</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>bild_url<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> 100</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>[bild_url]<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p>So sieht's aus:</p> <p><a href="/images/a81a467e-193f-11ec-8707-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/a81a467e-193f-11ec-8707-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Nun möchte ich, dass das input-Feld den Platz bis zum gelben Rand nutzt. Wenn ich dem aber <code>style = "width:100%"</code> hinzufüge, sieht es so aus:</p> <p><a href="/images/5af1b426-1940-11ec-8bdd-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/5af1b426-1940-11ec-8bdd-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Ich muss also 100% abzüglich der Breite des l-Tags rechnen. Wie geht das, wie verweist calc auf ein anderes Eelement?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2021/sep/19/calc-feldlange-abhangig-vom-vorangehenden-tag/1791726#m1791726 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-09-19T13:50:47Z 2021-09-19T13:50:47Z calc: Feldlänge abhängig von width eines anderen tags <p>@@Linuchs</p> <blockquote> <p>da es in HTML keine Tabulatoren gibt, an denen der nächste Text beginnt</p> </blockquote> <p>In CSS gibt es aber Grid. Und Flexbox.</p> <blockquote> <p>definiere ich ein div und danach geht's weiter.</p> </blockquote> <p>Im Danach ist von <code>div</code> nichts zu sehen.</p> <p>Dafür aber das:</p> <blockquote> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>l</span><span class="token punctuation">></span></span>###URL Panoramafoto###picture-URL###foto-URL###<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>l</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">[disabled]</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>bild_url<span class="token punctuation">"</span></span> <span class="token attr-name">title</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>bild_url<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> 100</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>[bild_url]<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Es gibt in HTML kein <code>l</code>-Element. Hatten wir letztens erst.</p> <p>Eingabefeleder müssen eine zugängliche Beschriftung (<code>label</code>) haben. Hatten wir auch letztens erst.</p> <p>Da du gegebene Hinweise ohnehin nicht umsetzt, ist es wohl sinnlos, dir weitere zu geben.</p> <p>Da heute Sonntag ist, mach ich doch mal was Sinnloses.</p> <blockquote> <p>Ich muss also 100% abzüglich der Breite des l-Tags rechnen.</p> </blockquote> <p>Nein. Muss du nicht. In CSS gibt es … – s.o.</p> <blockquote> <p>Wie geht das, wie verweist calc auf ein anderes Eelement?</p> </blockquote> <p>Gar nicht.</p> <p>Man kann, um das Kind DRY zu bekommen, Werte in <em lang="en">custom properties</em> ablegen.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2021/sep/19/calc-feldlange-abhangig-vom-vorangehenden-tag/1791851#m1791851 Rolf B 2021-09-24T08:59:53Z 2021-09-24T08:59:53Z calc: Feldlänge abhängig von width eines anderen tags <p>Hallo Linuchs,</p> <p>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?</p> <p>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.</p> <p>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:</p> <pre><code class="block language-css"><span class="token selector">form p</span> <span class="token punctuation">{</span> ... <span class="token comment">/* existierende Eigenschaften */</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">form p > input[type=url]</span> <span class="token punctuation">{</span> <span class="token property">flex</span><span class="token punctuation">:</span> 1 0 auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>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.</p> <p>Welche Auswirkungen das auf den Rest deiner Forms hat, kann ich nicht beurteilen; ich nehme an, dieser Teil von remso ist für Admins.</p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/sep/19/calc-feldlange-abhangig-vom-vorangehenden-tag/1791736#m1791736 Linuchs 2021-09-19T20:36:41Z 2021-09-19T20:36:41Z calc: Feldlänge abhängig von width eines anderen tags <p>Lieber Gunnar,</p> <p>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.</p> <blockquote> <p>Da du gegebene Hinweise ohnehin nicht umsetzt, ist es wohl sinnlos, dir weitere zu geben.</p> </blockquote> <p>Danke, dass du trotzdem gegen den selbsterkannten Strom ackerst.</p> <p>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:</p> <p><a href="/images/69aa3e52-1986-11ec-a641-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/69aa3e52-1986-11ec-a641-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>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.</p> <blockquote> <p>Es gibt in HTML kein l-Element. Hatten wir letztens erst.</p> </blockquote> <p>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.</p> <p>Und dann die zentrale Frage dieses Fadens:</p> <blockquote> <blockquote> <p>Wie geht das, wie verweist calc auf ein anderes Eelement?</p> </blockquote> </blockquote> <blockquote> <p>Gar nicht.</p> </blockquote> <p>Warum nicht gleich so?</p> https://forum.selfhtml.org/self/2021/sep/19/calc-feldlange-abhangig-vom-vorangehenden-tag/1791845#m1791845 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-09-23T18:26:02Z 2021-09-23T18:26:02Z calc: Feldlänge abhängig von width eines anderen tags <p>@@Linuchs</p> <blockquote> <blockquote> <p>Es gibt in HTML kein l-Element. Hatten wir letztens erst.</p> </blockquote> <p>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.</p> </blockquote> <p>Keine Ausreden! Wenn du alle <code>l</code> in <code>label</code> änderst (auch im Stylesheet), da kann nichts kaputtgehen.</p> <p>Und wenn du die <code>input</code>-Elemente mit IDs ausstattest (jedes seine eigene eindeutige!) und die <code>label</code>-Elemente mit zugehörigen <code>for</code>-Attributen, kann auch nichts kaputtgehen.</p> <hr> <blockquote> <p>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.</p> </blockquote> <p>Jeder hat ein Recht auf eine eigene Meinung. Aber nicht auf eigene Fakten.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2021/sep/19/calc-feldlange-abhangig-vom-vorangehenden-tag/1791846#m1791846 Tabellenkalk 2021-09-23T19:26:08Z 2021-09-23T19:26:08Z calc: Feldlänge abhängig von width eines anderen tags <p>Hallo,</p> <blockquote> <p>Wenn du alle <code>l</code> in <code>label</code> änderst (auch im Stylesheet), da kann nichts kaputtgehen.</p> </blockquote> <p>D.h. aus allen <code><ul><li></code>s werden <code><ulabel><labeli></code>s?</p> <p>scnr</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2021/sep/19/calc-feldlange-abhangig-vom-vorangehenden-tag/1791848#m1791848 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-09-24T04:14:31Z 2021-09-24T04:14:31Z calc: Feldlänge abhängig von width eines anderen tags <p>@@Tabellenkalk</p> <blockquote> <blockquote> <p>Wenn du alle <code>l</code> in <code>label</code> änderst (auch im Stylesheet), da kann nichts kaputtgehen.</p> </blockquote> <p>D.h. aus allen <code><ul><li></code>s werden <code><ulabel><labeli></code>s?</p> </blockquote> <p>Das ist nicht <a href="https://forum.selfhtml.org/cites/2268" rel="noopener noreferrer">listig</a>.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2021/sep/19/calc-feldlange-abhangig-vom-vorangehenden-tag/1791853#m1791853 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-09-24T09:09:17Z 2021-09-24T09:09:17Z calc: Feldlänge abhängig von width eines anderen tags <p>@@Rolf B</p> <blockquote> <p>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.</p> </blockquote> <p>Klasse? Warum?</p> <pre><code class="block language-css"><span class="token selector">input:not([type]), input[type="text"]</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span> </code></pre> <hr> <blockquote> <p>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 […]).</p> </blockquote> <p>Wirklich?</p> <pre><code class="block language-css"><span class="token selector">form p</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> contents <span class="token punctuation">}</span> </code></pre> <p>Chromium hat den Bug damit wohl gefixt; Safari noch nicht. [<a href="https://caniuse.com/css-display-contents" rel="noopener noreferrer">Can I Use</a>]</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2021/sep/19/calc-feldlange-abhangig-vom-vorangehenden-tag/1791854#m1791854 Rolf B 2021-09-24T09:16:50Z 2021-09-24T09:16:50Z calc: Feldlänge abhängig von width eines anderen tags <p>Hallo Gunnar,</p> <blockquote> <p>Warum?</p> </blockquote> <p>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.</p> <blockquote> <p>Wirklich?</p> </blockquote> <p>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?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/sep/19/calc-feldlange-abhangig-vom-vorangehenden-tag/1791855#m1791855 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-09-24T10:39:59Z 2021-09-24T10:39:59Z calc: Feldlänge abhängig von width eines anderen tags <p>@@Rolf B</p> <blockquote> <p>Ahja, das Ding ist so neu, das vergesse ich ständig.</p> </blockquote> <p><a href="https://codepen.io/gunnarbittersmann/pen/adEzJe" rel="noopener noreferrer">5…6 Jahre</a> – das muss dieses Neuland sein, von dem immer die Rede ist.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2021/sep/19/calc-feldlange-abhangig-vom-vorangehenden-tag/1791869#m1791869 Rolf B 2021-09-24T16:33:29Z 2021-09-24T16:33:29Z calc: Feldlänge abhängig von width eines anderen tags <p>Hallo Gunnar,</p> <p>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.</p> <p>Jaja, ist gut, ich bin halt nicht überall uptodate. Das ist das Problem von Multifullstack-Entwicklern, die können alles, aber nichts richtig.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/sep/19/calc-feldlange-abhangig-vom-vorangehenden-tag/1791872#m1791872 Der Martin 2021-09-24T17:31:01Z 2021-09-24T17:31:01Z calc: Feldlänge abhängig von width eines anderen tags <p>Hallo Rolf,</p> <blockquote> <p>Das ist das Problem von Multifullstack-Entwicklern, die können alles, aber nichts richtig.</p> </blockquote> <p>also genau wie Outlook.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Klein φ macht auch Mist. </div>