nicht angemeldet
input width
0 0 1 Flexible Box Layout
input width
Hallo,
Kann mir jemand einen Tip geben, wie ich <input/> dazu bekomme, den verfuegbaren Platz voll auszunutzen (width 100% funktioniert nicht wie gewuenscht)
Der Code sieht wie folgt aus:
<menu>
<li style="float:left">Menu 1</li>
<li style="float:left">Menu 2</li>
<li style="float:left">
<input type="text" value="Etwas Text"/>
</li>
<li style="float:right">Auswahl</li>
<br style="clear:both"/>
</menu>
Das input Feld soll sich automatisch an den verfuegbaren Platz anpassen (aehnlich einer Adressleiste im Browser). Als Referenzbrowser sollte es in Firefox >=4 und Chrome funktionieren. Waere sehr dankbar fuer Loesungsansaetze.
Gruss,
Steffen
-
Kann mir jemand einen Tip geben, wie ich <input/> dazu bekomme, den verfuegbaren Platz voll auszunutzen (width 100% funktioniert nicht wie gewuenscht)
Das Element <input> kennt die Eigenschaft <width> nicht, nur <maxlength> und <size> - siehe http://de.selfhtml.org/html/referenz/attribute.htm#input@title=SELFHTML.
Gruß H. -
Hi,
Das input Feld soll sich automatisch an den verfuegbaren Platz anpassen
Und wie viel Platz soll das sein, wenn es sich in einem gefloateten Elternelement befindet, und für dieses auch keine Breite angegeben ist?
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Hallo,
Kann mir jemand einen Tip geben, wie ich <input/> dazu bekomme, den verfuegbaren Platz voll auszunutzen (width 100% funktioniert nicht wie gewuenscht)
Floats schrumpfen immer zusammen auf die Größe, die der Inhalt erfordert. width: 100% für ein Element in einem Float wird also ohne weiteres nichts tun und wird die Breite des Floats nicht verändern.
Da kannst natürlich dem Float selbst eine feste Breite geben. Das kann eine Angabe z.B. in px, em, % sein. Was du allerdings vorhast, lässt sich mit Floats nicht umsetzen. Dazu gibt es das Flexible Box Layout. Hier dein Beispiel mit Flexbox umgesetzt:
Das Problem ist, dass das der Internet Explorer erst ab der kommenden Version 10 unterstützt und Opera noch nicht. Es gibt jedoch ein JavaScript, welches die Unterstützung nachrüstet.
Mathias
-
Hi Mathias,
Das ist genau die Information, nach der ich gesucht habe! Vielen Dank. Die Unterstuetzung fuer Internet Explorer ist fuer die Umsetzung nicht notwendig, aber trotzdem gut zu wissen.
Besten Dank!
-
Hallo Mathias,
ist es moeglich mit display:box und box-flex auch die Darstellung zu erreichen, das unter der Menuleiste ein div container definiert wird, der sich bis zum unteren Bildschrirm rand ausdehnt und sofern der Inhalt in dem container laenger als die verfuegbare bildschirmhoehe ist, scrollbalken angezeigt werden? Ich habe das Problem, dass Scrollbalken angezeigte werden fuer dei ganze Seite und beim scrollen auch die obere Menuleiste mitscrollt.
Ich kenne das XUL Konzept von Mozilla und da ist es relative einfach, diesen Effekt zu erzielen, indem flex attribute 1 ist und overflow:auto. Aber fuer HTML habe ich noch keine richtig gute Loesung gefunden.
Etwas in der Art
-----------------------------------------
| Menuleiste (dynam. Hoehe und Breite) |
-----------------------------------------
-----------------------------------------
| |
| |
| div container der scollt |
| |
| |
| |
-----------------------------------------Gruss, Steffen
-
Hallo,
ist es moeglich mit display:box und box-flex auch die Darstellung zu erreichen, das unter der Menuleiste ein div container definiert wird, der sich bis zum unteren Bildschrirm rand ausdehnt
Ja, klar. Das funktioniert genauso wie das menu-Beispiel, nur dass die Kinder der Box mit box-orient vertikal statt horizontal angeordnet werden. Das Inhalts-Element bekommt flex: 1, damit es den gesamten Bereich ausfüllt. Dazu muss body natürlich eine width und height von 100% haben.
Ich kenne das XUL Konzept von Mozilla und da ist es relative einfach, diesen Effekt zu erzielen, indem flex attribute 1 ist und overflow:auto.
Mit CSS ist es ganz genauso. XUL war das Vorbild für die gegenwärtige CSS-Flexbox-Umsetzung.
Zwei Einführungen:
http://www.html5rocks.com/en/tutorials/flexbox/quick/
http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/Mathias
-
Hallo,
Zuerst besten Dank fuer den Link. Den von Mozilla kannte ich noch nicht. Seltsam allerdings, dass Firefox das Box-Model scheinbar noch nicht vollstaendig umgesetzt hat. Zumindest funktiert das Beispiel von dir nur in Google Chrome, nicht aber in Firefox. Aber dass ist erst einmal sekundaer, da ich fuer Firefox es ueber ein XUL Dokument loesen kann. Insofern hat es mir sehr viel geholfen und es bleibt zu hoffen, dass Mozilla beim Firefox schnell nachzieht. Sollte ja nicht so schwierig sein, schliesslich kommt dass Grundmodell von Mozilla ;-)
Besten Danke!
-
-
-