How to get text input box to fill remaining space?

Scripsit Mike Harrison:

Quote: Originally Posted by Hi, I have some simple HTML like this:

Please post a URL, not a snippet of code.

Quote: Originally Posted by <div id="container" style="width:100%;"> <input type="text" <input type="button" style="float:right;" value="Click here..."> </div>

"Click here..." is clueless. Just an example, maybe, but it's a _bad_
example, and people actually use such button texts, which are
(literally) clueless, i.e. give no clue of the meaning and effect of the
button.

A text input field without a label is clueless, too.

It is not obvious at all how the text field and the button relate to
each other. If they do, why not use <fieldsetwith a descriptive
<legend>? Then you have a _different_ styling problem, and perhaps one
that is worth addressing.

Besides, such a button is normally quite pointless, since <input
type="button"only works (if it works at all) via scripting, and there
isn't any scripting in your snippet.

So how about starting a from a good and real example, presented by
providing the URL?

Quote: Originally Posted by I want the button to remain the normal size and be right-aligned, and the edit box to automatically take up the remaining width of the container.

Really? Even if the canvas is ten meters wide?

What happens when CSS is off? The width will be then set by browser
defaults, which are rather small (typically, about 20 characters). So
maybe you should first choose a suitable size="..." value; it's
inconvenient guesswork, but it's better to make an intelligent guess
that to let browsers default.

Quote: Originally Posted by I suspect I'm missing something obvious,

We obviously miss the URL.

Quote: Originally Posted by but how can I do this with CSS?

We miss the definition of what "this" consists of.

To begin with, when the button element appears after the text input
element, it will appear below it, though right-aligned. If you want them
to appear on the same line visually, you need to put the button element
before the text input element.

You haven't actually made _any_ attempt to set the text input field
width, in HTML or in CSS, in your snipped. The 100% width is set for the
container element, for which it has no effect, since the default
rendering is to make a <divelement as wide as possible.

There does not seem to be any direct CSS way of achieving what you want
(except using table-related properties that are not supported by IE),
but it's trivial in HTML, with one simple piece of CSS:

<table width="100%">
<tr><td width="100%"><input type="text" style="width:100%"></td>
<td><input type="button" value="Click here..."></td></tr>
</table>

However, what would be the point? If the field needs as much space as
possible, why waste space by putting a button on its right? And why not
make it a textarea if it may need a lot of space?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jukka K. Korpela wrote:

Quote: Originally Posted by Scripsit Mike Harrison: > Quote: Originally Posted by >Hi, I have some simple HTML like this: > Please post a URL, not a snippet of code.

One doesn't need a URL of a fully formed page to ask how to do
something. His illustrative snippet is short and clear. I'm awarding you
one cluelessness point of your own.

Quote: Originally Posted by Quote: Originally Posted by ><div id="container" style="width:100%;"> ><input type="text" <input type="button" style="float:right;" >value="Click here..."> ></div> > "Click here..." is clueless. Just an example, maybe, but it's a _bad_ example, and people actually use such button texts, which are (literally) clueless, i.e. give no clue of the meaning and effect of the button.

Another cluelessness point for Jukka, who doesn't understand it's
perfectly OK for an example to be generic and stripped-down, and that
all that's required of it is that it be sufficiently illustrative for
the question being asked.

Quote: Originally Posted by A text input field without a label is clueless, too.

A third cluelessness point for Jukka, to whom it doesn't occur that the
OP almost certainly intends to have a label in the real page but just
didn't bother included it in the example, where it wasn't necessary for
the purposes of his question.

Quote: Originally Posted by It is not obvious at all how the text field and the button relate to each other. If they do, why not use <fieldsetwith a descriptive <legend>? Then you have a _different_ styling problem, and perhaps one that is worth addressing.

It's an example. The clarity of their working relationship in the final
product is extraneous here and in fact might even detract from the
example's ability to illustrate the OP's question. A fourth cluelessness
point for Jukka.

Quote: Originally Posted by Besides, such a button is normally quite pointless, since <input type="button"only works (if it works at all) via scripting, and there isn't any scripting in your snippet.

Cluelessness point number five. Jukka still hasn't figured out that the
example isn't intended to be the whole page.

Quote: Originally Posted by So how about starting a from a good and real example, presented by providing the URL?

Probably because there isn't anything else on the page that would have
anything to do with getting an answer to the OP's technical question.

Quote: Originally Posted by Quote: Originally Posted by >I want the button to remain the normal size and be right-aligned, and >the edit box to automatically take up the remaining width of the >container. > Really? Even if the canvas is ten meters wide?

If 1em = 20cm on that particular canvas, why not? Cluelessness point
number six.

Quote: Originally Posted by What happens when CSS is off? The width will be then set by browser defaults, which are rather small (typically, about 20 characters). So maybe you should first choose a suitable size="..." value; it's inconvenient guesswork, but it's better to make an intelligent guess that to let browsers default.

Wow, one helpfulness point.

Quote: Originally Posted by > Quote: Originally Posted by >I suspect I'm missing something obvious, > We obviously miss the URL. > Quote: Originally Posted by >but how can I do this with CSS? > We miss the definition of what "this" consists of.

Attention deficit disorder acting up? Even if you lose track of
pronominal antecedents that easily, you can always go back and reread.

Quote: Originally Posted by To begin with, when the button element appears after the text input element, it will appear below it, though right-aligned. If you want them to appear on the same line visually, you need to put the button element before the text input element. > You haven't actually made _any_ attempt to set the text input field width, in HTML or in CSS, in your snipped. The 100% width is set for the container element, for which it has no effect, since the default rendering is to make a <divelement as wide as possible. > There does not seem to be any direct CSS way of achieving what you want (except using table-related properties that are not supported by IE), but it's trivial in HTML, with one simple piece of CSS:

Two more helpfulness points, bringing the total to three.

Quote: Originally Posted by <table width="100%"> <tr><td width="100%"><input type="text" style="width:100%"></td> <td><input type="button" value="Click here..."></td></tr> </table>

How dare you provide an example without building it into a fully
functional, cluelessness-free page with a URL! What a hypocrite. For
this I'm awarding two more cluelessness points.

Quote: Originally Posted by > However, what would be the point? If the field needs as much space as possible, why waste space by putting a button on its right? And why not make it a textarea if it may need a lot of space? >

One more helpfulness point. Final tally: 8 cluelessness points, 4
helpfulness points. Final cluelessness/helpfulness (CH) quotient for the
posting: 200%.

On 2008-06-29, Jukka K. Korpela <jkorpela@cs.tut.fiwrote:

Quote: Originally Posted by Scripsit Mike Harrison:

[...]

Quote: Originally Posted by Quote: Originally Posted by ><div id="container" style="width:100%;"> ><input type="text" <input type="button" style="float:right;" >value="Click here..."> ></div> > "Click here..." is clueless. Just an example, maybe, but it's a _bad_ example, and people actually use such button texts, which are (literally) clueless, i.e. give no clue of the meaning and effect of the button.

I read somewhere about a survey of which button/link texts people were
most likely to click on. "Click here!" resulted in the most clicks
because users have an attention span of four seconds, wish to remain
clueless, and tend to just obey direct commands.

Things like "more information", "read more", etc. were clicked on the
least because they made the whole thing seem too much like hard work.

[...]

Quote: Originally Posted by To begin with, when the button element appears after the text input element, it will appear below it, though right-aligned. If you want them to appear on the same line visually, you need to put the button element before the text input element.

Yes, although this is actually a bug shared by Firefox 2 and IE. It
shouldn't be necessary to put the float first.

Quote: Originally Posted by You haven't actually made _any_ attempt to set the text input field width, in HTML or in CSS, in your snipped. The 100% width is set for the container element, for which it has no effect, since the default rendering is to make a <divelement as wide as possible. > There does not seem to be any direct CSS way of achieving what you want (except using table-related properties that are not supported by IE), but it's trivial in HTML, with one simple piece of CSS:

There is a way, by putting the text input in a different block
formatting context.

..foo
{
display: block;
overflow: hidden; /* to make it a BFC */
}
input[type="text"] { width: 100%; }
input[type="button"] { float: right; }

....

<input type="button" value="Click here">
<span class="foo">
<input type="text">
</span>

Caveat: the spec says browsers can just put .foo below the button,
rather than beside it, if they want.

Scripsit Harlan Messinger:

Quote: Originally Posted by Final cluelessness/helpfulness (CH) quotient for the posting: 200%.

No, your posting was completely unhelpful and stupid. You don't have
anything useful to say, do you, but you apparently need to keep your
fingers warm. How about using just Notepad for the exercise next time?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jukka K. Korpela wrote:

Quote: Originally Posted by Scripsit Harlan Messinger: > Quote: Originally Posted by >Final cluelessness/helpfulness (CH) quotient for >the posting: 200%. > No, your posting was completely unhelpful and stupid. You don't have anything useful to say, do you, but you apparently need to keep your fingers warm. How about using just Notepad for the exercise next time?

I helped the OP plenty, by reassuring him that your pissy carping wasn't
the gospel around here and that he needn't pay any attention to your
asinine commentary. Meanwhile, you are a master at being unhelpful and
stupid, so why don't you follow your own advice, you unhappy wretch?

Scripsit Ben C:

Quote: Originally Posted by I read somewhere about a survey of which button/link texts people were most likely to click on.

I read somewhere about a survey where it was found out that 95.9% of all
surveys produce incorrect results due to unsound methods, but it doesn't
matter really since the results will be either misquoted or
misunderstood, usually both.

Quote: Originally Posted by "Click here!" resulted in the most clicks because users have an attention span of four seconds, wish to remain clueless, and tend to just obey direct commands.

And click on a wrong button.

Wait, there _is_ a CSS-related issue here: CSS, in addition to certain
features of HTML markup, is a way to make the association of texts,
input fields, and buttons so obvious that people see, without thinking,
what a button relates to. This is far more important than e.g.
utilizing all the available space for an input box.

Quote: Originally Posted by .foo { display: block; overflow: hidden; /* to make it a BFC */ } input[type="text"] { width: 100%; } input[type="button"] { float: right; } > ... > <input type="button" value="Click here"> <span class="foo"> <input type="text"> </span>

I'm not sure whether I'm convinced that this _should_ work, but
a) it's more tricky than a simple table (with a simple CSS rule)
b) on IE 7, it causes the right border of the input box hit the button;
this looks odd and puzzling
c) of course, it doesn't work IE 6 unless you change the selectors to
class (or id) selectors

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On 2008-06-29, Jukka K. Korpela <jkorpela@cs.tut.fiwrote:
[...]

Quote: Originally Posted by Quote: Originally Posted by >.foo >{ > display: block; > overflow: hidden; /* to make it a BFC */ >} >input[type="text"] { width: 100%; } >input[type="button"] { float: right; } >> >... >> ><input type="button" value="Click here"> ><span class="foo"> > <input type="text"> ></span> > I'm not sure whether I'm convinced that this _should_ work, but

These are the relevant bits of the spec if you are interested. As I
mentioned, the browser only "may" do this:

CSS 2.1 9.4.1:

In a block formatting context, each box's left outer edge touches the
left edge of the containing block (for right-to-left formatting, right
edges touch). This is true even in the presence of floats (although a
box's line boxes may shrink due to the floats), unless the box
establishes a new block formatting context (in which case the box
itself _may_ become narrower due to the floats).

CSS 2.1 9.5:

The margin box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context [p. 126] (such as an element with 'overflow' other than
'visible') must not overlap any floats in the same block formatting
context as the element itself. If necessary, implementations should
clear the said element by placing it below any preceding floats, but
may place it adjacent to such floats if there is sufficient space.

Quote: Originally Posted by a) it's more tricky than a simple table (with a simple CSS rule) b) on IE 7, it causes the right border of the input box hit the button; this looks odd and puzzling

I suppose a small margin on the input box might solve that problem.

In article <6cpte7F3g2eapU1@mid.individual.net>,
Harlan Messinger <hmessinger.removethis@comcast.netwrote:

Quote: Originally Posted by Jukka K. Korpela wrote: Quote: Originally Posted by Scripsit Mike Harrison: Quote: Originally Posted by Hi, I have some simple HTML like this: Please post a URL, not a snippet of code. > One doesn't need a URL of a fully formed page to ask how to do something. His illustrative snippet is short and clear. I'm awarding you one cluelessness point of your own.

[...]

Quote: Originally Posted by Final tally: 8 cluelessness points, 4 helpfulness points. Final cluelessness/helpfulness (CH) quotient for the posting: 200%.

I was slightly puzzled why you did not award a cluelessness point for
the fault you theorised was due to attention deficit disorder. You are
too soft hearted Harlan. <g>

--
dorayme

dorayme wrote:

Quote: Originally Posted by In article <6cpte7F3g2eapU1@mid.individual.net>, Harlan Messinger <hmessinger.removethis@comcast.netwrote: > Quote: Originally Posted by >Jukka K. Korpela wrote: Quote: Originally Posted by >>Scripsit Mike Harrison: >>> >>>Hi, I have some simple HTML like this: >>Please post a URL, not a snippet of code. >One doesn't need a URL of a fully formed page to ask how to do >something. His illustrative snippet is short and clear. I'm awarding you >one cluelessness point of your own. > [...] > Quote: Originally Posted by >Final tally: 8 cluelessness points, 4 >helpfulness points. Final cluelessness/helpfulness (CH) quotient for the >posting: 200%. > I was slightly puzzled why you did not award a cluelessness point for the fault you theorised was due to attention deficit disorder. You are too soft hearted Harlan. <g> >

Yes, sometimes pity gets the best of me.

Scripsit Ben C:

Quote: Originally Posted by On 2008-06-29, Jukka K. Korpela <jkorpela@cs.tut.fiwrote: [...] Quote: Originally Posted by Quote: Originally Posted by >>.foo >>{ >> display: block; >> overflow: hidden; /* to make it a BFC */ >>} >>input[type="text"] { width: 100%; } >>input[type="button"] { float: right; }

[...]

Quote: Originally Posted by Quote: Originally Posted by >b) on IE 7, it causes the right border of the input box hit the >button; this looks odd and puzzling > I suppose a small margin on the input box might solve that problem.

Well, how much margin can you have if you have 100% width? On IE 7,
setting a margin does not seem to have any effect.

(If you set left margin for the button, the right border of the text
input box magically disappears.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On 2008-06-30, Jukka K. Korpela <jkorpela@cs.tut.fiwrote:

Quote: Originally Posted by Scripsit Ben C: > Quote: Originally Posted by >On 2008-06-29, Jukka K. Korpela <jkorpela@cs.tut.fiwrote: >[...] Quote: Originally Posted by >>>.foo >>>{ >>> display: block; >>> overflow: hidden; /* to make it a BFC */ >>>} >>>input[type="text"] { width: 100%; } >>>input[type="button"] { float: right; } [...] Quote: Originally Posted by Quote: Originally Posted by >>b) on IE 7, it causes the right border of the input box hit the >>button; this looks odd and puzzling >> >I suppose a small margin on the input box might solve that problem. > Well, how much margin can you have if you have 100% width?

Difficult unless you make the margin a percentage and use 5% + 95% or
something. In that case you might as well just set width to 95% and not
bother with margin.

Quote: Originally Posted by On IE 7, setting a margin does not seem to have any effect.

Well I can't cure a rainy day.

Actually a more sensible solution in the example I gave would be some
right padding on .foo instead. Then you can set the padding in pixels.

Quote: Originally Posted by (If you set left margin for the button, the right border of the text input box magically disappears.)

Presumably it hasn't disappeared but is just covered up by the left edge
of the button.