Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #41373

Re: styling <input type=text> elements

Show all headers | View raw

On Fri, 28 Jul 2023 06:31:02 -0700 (PDT), luserdroog
<luser.droog@gmail.com> wrote in
<112fa9f3-7d2d-4c3b-b417-655eb0776264n@googlegroups.com>:

>After much searching and struggling I've discovered that the 
>only way to adjust the size of an <input type=text> element is 
>with its size="number-of-chars" attribute.
>
>Are there any common workarounds to let me style the thing
>to (at least appear to) fill its containing box? Can I just simulate
>one with a web component and having it look different but 
>feed a hidden <input> element in its shadow dom? 
>
>I suppose the answer to that last question is probably Yes. 
>Does this sound like a good idea?


If you have 
     <input id='a' size='10' value='123'>
then adjust the size with
     document.getElementById('a').setAttribute('size', 15) ;

If you have 
    <input id='b' style="width:10em" value='123'>
then adjust the width with
    document.getElementById('b').style.width='25em' ;

You probably want to investigate getting width of a string and using a
fixed width font to get things to fit.  "onchange" is useful.

You could also replace the input element with a bordered string inline
after the value is entered.
<span style="border:red 1px solid;">12345</span>

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-28 06:31 -0700
  Re: styling <input type=text> elements Ben Bacarisse <ben.usenet@bsb.me.uk> - 2023-07-28 20:11 +0100
    Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-31 06:53 -0700
      Re: styling <input type=text> elements "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2023-07-31 20:59 -0700
        Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-08-02 07:33 -0700
    Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-31 06:58 -0700
      Re: styling <input type=text> elements Ben Bacarisse <ben.usenet@bsb.me.uk> - 2023-07-31 16:49 +0100
        Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-31 09:41 -0700
          Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-31 09:57 -0700
  Re: styling <input type=text> elements JJ <jj4public@outlook.com> - 2023-07-29 17:05 +0700
    Re: styling <input type=text> elements The Natural Philosopher <tnp@invalid.invalid> - 2023-07-29 17:49 +0100
  Re: styling <input type=text> elements Dr.Kral@nyc.rr.com - 2023-07-29 08:57 -0400
    Re: styling <input type=text> elements The Natural Philosopher <tnp@invalid.invalid> - 2023-07-29 17:52 +0100
  Re: styling <input type=text> elements Arno Welzel <usenet@arnowelzel.de> - 2023-07-30 09:45 +0200

csiph-web