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

Groups > comp.lang.javascript > #41370 > unrolled thread

styling <input type=text> elements

Back to article view | Back to comp.lang.javascript

Contents

  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

#41370 — styling <input type=text> elements

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?

[toc] | [next] | [standalone]

#41371

luserdroog <luser.droog@gmail.com> writes:

> 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.

Can you say more?  Are you limited to what browsers you must support.  I
thought you could style the width in most.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#41380

On Friday, July 28, 2023 at 2:11:45 PM UTC-5, Ben Bacarisse wrote:
> luserdroog <luser...@gmail.com> writes: 
> 
> > 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.
> Can you say more? Are you limited to what browsers you must support. I 
> thought you could style the width in most. 
> 

Thanks for all the responses. To the questions, it's a very simple 
single page web app with only a half dozen users and I'm also the
primary user/developer/tester. 

The context is a text edit widget that manifests inside a spreadsheet-like
table view of personnel scheduling data. Clicking a cell turns the 
<td><span/></td> into a <td><input></td> and then onchange or onblur on 
the input changes it back to a span.

eg.
https://github.com/luser-dr00g/luser-dr00g.github.io/blob/master/cm-tool.html#L1092

function addGridNotesWidgets(){
  let notes = grid.querySelectorAll( ".notes" );
  notes.forEach( (note) => {
    let idx = note.dataset.index;
    const clickHandler = (event) => {
      let edit = document.createElement( "input" );
      edit.value = global.data[ idx ][5];
      //edit.size = 30;     // tweak the size or width here?
      let target = note.childNodes[0];
      note.replaceChild( edit, target );
      note.parentNode.removeEventListener( "click", clickHandler );
      const done = (event) => {
	if(  edit.value == ""  ) edit.value = "\t";
	target.textContent = edit.value;
	changeNotes( idx, edit.value );
	edit.parentNode.replaceChild( target, edit );
	saveData();
	output();
      };
      edit.addEventListener( "change", done );
      edit.addEventListener( "blur", done );
      edit.focus();
    };
    note.parentNode.addEventListener( "click", clickHandler );
  });
}

[toc] | [prev] | [next] | [standalone]

#41385

On Monday, July 31, 2023 at 8:53:58 AM UTC-5, luserdroog wrote:
> [...]
> The context is a text edit widget that manifests inside a spreadsheet-like 
> table view of personnel scheduling data. Clicking a cell turns the 
> <td><span/></td> into a <td><input></td> and then onchange or onblur on 
> the input changes it back to a span. 

Is it not simpler to keep <td><input></td> and then with clicking toggle the readonly attribute?

The css :read-only selector will allow you to control appearance.

[toc] | [prev] | [next] | [standalone]

#41386

On Monday, July 31, 2023 at 10:59:34 PM UTC-5, Michael Haufe (TNO) wrote:
> On Monday, July 31, 2023 at 8:53:58 AM UTC-5, luserdroog wrote: 
> > [...]
> > The context is a text edit widget that manifests inside a spreadsheet-like 
> > table view of personnel scheduling data. Clicking a cell turns the 
> > <td><span/></td> into a <td><input></td> and then onchange or onblur on 
> > the input changes it back to a span.
> Is it not simpler to keep <td><input></td> and then with clicking toggle the readonly attribute? 
> 
> The css :read-only selector will allow you to control appearance.

Verry interesting. I completely hadn't considered that. With all the trouble 
controlling the size of the inputs, I had written them off as part of "the real page"
in my vague design/imagination. 

That would also solve the riddle of whether
to put the click handlers on the td or the spans (because sometimes the spans
had no content in which case they don't have a clickable area). 
With <td><input></td> as a more permanent substructure, it's quite obvious that 
the handlers should go on the input element.

Not swapping the elements in the dom means none of the dozens of lines of
code that do all that business.  So, I'm loving this ideamore  the more I think on it.

[toc] | [prev] | [next] | [standalone]

#41381

On Friday, July 28, 2023 at 2:11:45 PM UTC-5, Ben Bacarisse wrote:
> luserdroog <luser...@gmail.com> writes: 
> 
> > 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.
> Can you say more? Are you limited to what browsers you must support. I 
> thought you could style the width in most. 
> 

Oops, other question. Nope, I can safely assume/require the latest versions
of chrome or firefox.  In fact I'm relying on this for the next rewrite 
that'll use the new compression/decompression stuff.

[toc] | [prev] | [next] | [standalone]

#41382

luserdroog <luser.droog@gmail.com> writes:

> On Friday, July 28, 2023 at 2:11:45 PM UTC-5, Ben Bacarisse wrote:
>> luserdroog <luser...@gmail.com> writes: 
>> 
>> > 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.
>> Can you say more? Are you limited to what browsers you must support. I 
>> thought you could style the width in most. 
>
> Oops, other question. Nope, I can safely assume/require the latest versions
> of chrome or firefox.  In fact I'm relying on this for the next rewrite 
> that'll use the new compression/decompression stuff.

So now I don't know what the problem is!

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#41383

On Monday, July 31, 2023 at 10:49:18 AM UTC-5, Ben Bacarisse wrote:
> luserdroog <luser...@gmail.com> writes: 
> 
> > On Friday, July 28, 2023 at 2:11:45 PM UTC-5, Ben Bacarisse wrote: 
> >> luserdroog <luser...@gmail.com> writes: 
> >> 
> >> > 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. 
> >> Can you say more? Are you limited to what browsers you must support. I 
> >> thought you could style the width in most. 
> > 
> > Oops, other question. Nope, I can safely assume/require the latest versions 
> > of chrome or firefox. In fact I'm relying on this for the next rewrite 
> > that'll use the new compression/decompression stuff.
> So now I don't know what the problem is! 
> 

All good now. style="width:inherit" did the trick.
It's beautiful. sniff.

[toc] | [prev] | [next] | [standalone]

#41384

On Monday, July 31, 2023 at 11:41:58 AM UTC-5, luserdroog wrote:
> On Monday, July 31, 2023 at 10:49:18 AM UTC-5, Ben Bacarisse wrote: 
> > luserdroog <luser...@gmail.com> writes: 
> > 
> > > On Friday, July 28, 2023 at 2:11:45 PM UTC-5, Ben Bacarisse wrote: 
> > >> luserdroog <luser...@gmail.com> writes: 
> > >> 
> > >> > 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. 
> > >> Can you say more? Are you limited to what browsers you must support. I 
> > >> thought you could style the width in most. 
> > > 
> > > Oops, other question. Nope, I can safely assume/require the latest versions 
> > > of chrome or firefox. In fact I'm relying on this for the next rewrite 
> > > that'll use the new compression/decompression stuff. 
> > So now I don't know what the problem is! 
> >
> All good now. style="width:inherit" did the trick. 
> It's beautiful. sniff.

Correction, it was 
        edit.style.width = td.offsetWidth + "px";
 that finally worked.

[toc] | [prev] | [next] | [standalone]

#41372

On Fri, 28 Jul 2023 06:31:02 -0700 (PDT), luserdroog wrote:
> 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?

Chances are that, whatever CSS you've tried to apply to the INPUT element,
is overidden by a higher priority styles. Meaning that, you styles aren't
defined with a CSS selector which is specific enough to have a higher
priority than the existing one.

Content in Shadow DOM is similar (but not the same) to a separate document
in an IFRAME. CSS rules by default, don't apply across Shadow DOM unless the
correct CSS selector is used.

[toc] | [prev] | [next] | [standalone]

#41374

On 29/07/2023 11:05, JJ wrote:
> On Fri, 28 Jul 2023 06:31:02 -0700 (PDT), luserdroog wrote:
>> 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?
> 
> Chances are that, whatever CSS you've tried to apply to the INPUT element,
> is overidden by a higher priority styles. Meaning that, you styles aren't
> defined with a CSS selector which is specific enough to have a higher
> priority than the existing one.
> 
> Content in Shadow DOM is similar (but not the same) to a separate document
> in an IFRAME. CSS rules by default, don't apply across Shadow DOM unless the
> correct CSS selector is used.

Firefox inspector is your friend here. For the record < input > does in 
fact respond to style= "width: X px".

But the problem is that until you have written as many pages as I seem 
to have the habit of turning margins paddings, and everything else to 
zero on your <body> definition leads to many strange interpretations by 
the browser itself that are different between browsers, oh, and if you 
want to preserve fonts across browser and platforms embed those, as well.

-- 
How fortunate for governments that the people they administer don't think.

Adolf Hitler

[toc] | [prev] | [next] | [standalone]

#41373

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>

[toc] | [prev] | [next] | [standalone]

#41375

On 29/07/2023 13:57, Dr.Kral@nyc.rr.com wrote:
> 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>
> 
> 
Make your <input> a nice width and allow overflow in it.
The rest of the default HTML entry should be replaced with javascripted 
buttons apart from the drop down menus which need to be utterly restyled 
to not look like something out of the 1980s. File upload is another one 
where you have to overlay the default styles.


> 
> 

-- 
Climate Change: Socialism wearing a lab coat.

[toc] | [prev] | [next] | [standalone]

#41377

luserdroog, 2023-07-28 15:31:

> 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.

No. You can also set its width using CSS and "width". Also the distance
from the text and the surrounding border can be styled as well as all
colours.


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web