ralphi: Inputfeld-Größe dynamisch anpassen?

Hi Leute,

eigentlich peinlich, weil wahrscheinlich sehr einfach, aber Dr. google spuckt nix aus.

  • wie kann ich die Länge eines Inputfeldes type=’text’ an eine veränderbare Fenstergröße, ohne Scrollbalken anpassen?
    ZB. wenn ein Mobildevice gedreht wird.
    also ein Effekt wie wenn man: size='20%' maxlength='20%' tun könnte und das Feld immer den verfügbaren Platz einnimmt.

  • und ein Inputfeld type=‘number’, möglicht bei allen Browsern (echte) size='5' hat?

zB.

<table border='1' width='100%' >  
<tr>  
    <td>...</td><td>...</td><td>...</td>  
    <td><input type='text' class='name' (size='xxx' maxlength='xxx' ) placeholder='Name Z.B. ding1 ding2' /></td>  
    <td width='hat bei Firefox gar keinen Einfluss' ><input type='number' class='preis' step='0.01' size='5'   /></td>  
</tr>  
</table>

Viele Grüße aus LA

--
ralphi
  1. Mahlzeit,

    eigentlich peinlich, weil wahrscheinlich sehr einfach, aber Dr. google spuckt nix aus.

    1. du missbrauchst Tabellen fürs Design
    2. du hast noch nie was von CSS gehört

    --
    42
    1. moin,

      es handelt sich um eine richtige, echte Tabelle zum update einer DB :-)
      ich arbeite gerne mit CSS.
      Hoffe mir auch eine Lösung in CSS.

      Viele Grüße aus LA

      --
      ralphi
  2. also ein Effekt wie wenn man: size='20%' maxlength='20%' tun könnte und das Feld immer den verfügbaren Platz einnimmt.

    Einfach mit css:

    td input {  
       width:100%;  
       //...  
    }
    
    • und ein Inputfeld type=‘number’, möglicht bei allen Browsern (echte) size='5' hat?

    Einfach mit html5 und oder Javascript:

    <!doctype html>  
    <html>  
      <body>  
        <input type="text" min=0 max=99999 pattern="[0-9]{0,5}" onkeyup="if ( parseFloat(this.value) > this.max ) { this.value=this.max; }; if ( parseFloat(this.value) < this.min ) { this.value=this.min; }">  
        <input type="submit">  
      </body>  
    </html>
    

    http://jsfiddle.net/LLo57t5t/

    (Selbst zu kombinieren und zu verfeinern....)

    Jörg Reinholz

    1. Moin Jörg,

      Einfach mit css:

      td input {

      width:100%;
         //...
      }

      
      >   
      
      hab doch geahnt, dass es einfach ist – danke :-)  
        
      das mit dem type=’number’ ist so ne Sache. Je Browser anders.  
      Man bekommts allerdings bei td -> width:1%; ziemlich klein (input auch width:100%) – komisch mit td -> width:20px; machts groß ?!  
        
        
      type=’number’ wär schon witzig – schalten die Mobilen immer das Ziffernblatt statt Tastatur.  
      Viele Grüße aus LA
      
      -- 
      ralphi
      
      1. @@ralphi:

        nuqneH

        das mit dem type=’number’ ist so ne Sache. Je Browser anders.

        Ja, und?

        Do websites need to look exactly the same in every browser? dot com

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. das mit dem type=’number’ ist so ne Sache. Je Browser anders.
          Ja, und?
          Do websites need to look exactly the same in every browser? dot com

          Es geht nicht nur um den "Look", das inkonsistente Verhalten der Clients bzgl. Punkt und Komma nervt ebenfalls.

          1. Mahlzeit,

            Es geht nicht nur um den "Look", das inkonsistente Verhalten der Clients bzgl. Punkt und Komma nervt ebenfalls.

            Nur dann, wenn du die Daten nicht serverseitig prüfst. Und wenn du das nicht tust, ist dir eh nicht zu helfen ;)

            --
            42
          2. @@Mitleser:

            nuqneH

            das mit dem type=’number’ ist so ne Sache. Je Browser anders.
            Ja, und?
            Do websites need to look exactly the same in every browser? dot com

            Es geht nicht nur um den "Look", das inkonsistente Verhalten der Clients bzgl. Punkt und Komma nervt ebenfalls.

            Do websites need to be experienced exactly the same in every browser? dot com

            input type="number" hat das dem Nutzer in *seinem* Browser gewohnte Verhalten.

            Was ist wichtiger: Konsistenz einer Website über verschiedenen Systeme hinweg oder Konsistenz eines Systems über verschiedene Websites hinweg?

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        2. Ja, und?

          Do websites need to look exactly the same in every browser? dot com

          “exactly -> no” ist korrekt, was Rahmen etc. betrifft.

          Dennoch:
          Ein Autor einer webside möchte doch nicht, dass einige User scrollen müssen bzw. sich die Übersichtlichkeit der Seite verändert, nur weil er zB. Firefox statt Chrom verwendet.
          Also die Browserentwickler sollten schon angehalten werden, HTML Elemente mit Größe und Funktion anzugleichen.
          Meine Meinung ;-)

          Viele Grüße aus LA

          --
          ralphi