Outlining form inputs

Hi there,

I am wondering if the following can be accomplished in CSS:

I have a form with one input per line. Each input is preceded with a
label of variable character length. I would like my input's width to
grow and fill the rest of the available line. I can't see a way of
doing this in pure CSS, the only alternative I see is wrapping each
line in a 2-column table, and setting the input width to 100% of the
containing cell.

Any ideas?

Regards,

Gerry.

Gerry Vandermaesen <gerry.vandermaesen (AT) gmail (DOT) com> scripsit:

I have a form with one input per line. Each input is preceded with a
label of variable character length. I would like my input's width to
grow and fill the rest of the available line. I can't see a way of
doing this in pure CSS,

Of course you can do _nothing_ in pure CSS. You need some HTML (or XML) as
well. In this case, you need some markup structure so that you have some
elements to attach CSS rules to. So what is your markup? In theory, it
should be independent of styling, but in practice, styling considerations
can be essential. This means that you could consider using a table, which
would be a logical approach anyway.

the only alternative I see is wrapping each
line in a 2-column table, and setting the input width to 100% of the
containing cell.

Well, it seems that you already have a solution - you just haven't sold it
to yourself yet!

Actually the most difficult part might be setting the width for the _first_
column. You can't just leave it unspecified and the set the entire table's
width to 100%, because browsers will treat this in different ways . Perhaps
the best shot is to set the first column's width in em units, using some
good guess based on the expected maximum length of the labels.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

On Tue, 30 May 2006 00:53:13 +0300 Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:

Gerry Vandermaesen <gerry.vandermaesen (AT) gmail (DOT) com> scripsit:

the only alternative I see is wrapping each
line in a 2-column table, and setting the input width to 100% of the
containing cell.

Well, it seems that you already have a solution - you just haven't sold it
to yourself yet!

There are people hanging around that will say that tables should not be
used (except for tabular data). What he really needs to do is learn to
ignore them.

Actually the most difficult part might be setting the width for the _first_
column. You can't just leave it unspecified and the set the entire table's
width to 100%, because browsers will treat this in different ways . Perhaps
the best shot is to set the first column's width in em units, using some
good guess based on the expected maximum length of the labels.

If you narrow the browsers down to just those that are in compliance with
web standards, will they still treat the 100% width in different ways?

--

---------------------------------------/----------------------------------|
Phil Howard KA9WGN (ka9wgn.ham.org) / Do not send to the address below |
first name lower case at ipal.net / spamtrap-2006-05-30-0349 (AT) ipal (DOT) net |
------------------------------------/-------------------------------------|

phil-news-nospam (AT) ipal (DOT) net wrote:

On Tue, 30 May 2006 00:53:13 +0300 Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:
| Gerry Vandermaesen <gerry.vandermaesen (AT) gmail (DOT) com> scripsit:
|
|> the only alternative I see is wrapping each
|> line in a 2-column table, and setting the input width to 100% of the
|> containing cell.
|
| Well, it seems that you already have a solution - you just haven't sold it
| to yourself yet!

There are people hanging around that will say that tables should not be
used (except for tabular data). What he really needs to do is learn to
ignore them.

Well wrapping each line in an individual table didn't look like a very
clean solution. But perhaps in this case it's the only valid solution
to accomplish my goal?

On 30 May 2006 05:19:31 -0700 Gerry Vandermaesen <gerry.vandermaesen (AT) gmail (DOT) com> wrote:

phil-news-nospam (AT) ipal (DOT) net wrote:
On Tue, 30 May 2006 00:53:13 +0300 Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:
| Gerry Vandermaesen <gerry.vandermaesen (AT) gmail (DOT) com> scripsit:
|
|> the only alternative I see is wrapping each
|> line in a 2-column table, and setting the input width to 100% of the
|> containing cell.
|
| Well, it seems that you already have a solution - you just haven't sold it
| to yourself yet!

There are people hanging around that will say that tables should not be
used (except for tabular data). What he really needs to do is learn to
ignore them.

Well wrapping each line in an individual table didn't look like a very
clean solution. But perhaps in this case it's the only valid solution
to accomplish my goal?

For my N-column layouts, I frequently use a table with ONE row and N cells
where each whole column takes a cell. Text and other stuff then flows in
that cell. For example: http://linuxhomepage.com/

--

---------------------------------------/----------------------------------|
Phil Howard KA9WGN (ka9wgn.ham.org) / Do not send to the address below |
first name lower case at ipal.net / spamtrap-2006-06-01-0127 (AT) ipal (DOT) net |
------------------------------------/-------------------------------------|