How is a text button width set?

Pengiun3 · Oct 12, 2003

Hello,

I have a table that includes a set of buttons with various text. I
want the buttons in a column to all have the same width (of the widest
button). I've been through several tutorials and even read a few sites
source. I've not found the proper keywords.

The following buttons have various widths. I'd like them to all have
the width of the column. How should I change these?

<input type=\"submit\" name=\"Change\" value=\"Change\">
<input type=\"submit\" name=\"Delete\" value=\"Delete\">
<input type=\"submit\" name=\"Add/Edit\" value=\"Add/Edit\">

Thank you,

David

brucie · Oct 12, 2003

The following buttons have various widths. I'd like them to all have
the width of the column. How should I change these?

input{width:100%;} will make the buttons the width of their container.
(if the browser supports it)

Pengiun3 · Oct 12, 2003

Brucie,

That doesn't work for me. I'm viewing with Netscape on linux RH8 at
the moment. I don't have a WinMachine with IE to check it right now.
I'd like to find something that would work on most browsers.

David

brucie · Oct 12, 2003

That doesn't work for me. I'm viewing with Netscape on linux RH8 at
the moment. I don't have a WinMachine with IE to check it right now.
I'd like to find something that would work on most browsers.

it should be fine. NS version? URL?

please don't toppost
How am I supposed to post my replies in a newsgroup?:
http://allmyfaqs.com/faq.pl?How_to_post

Pengiun3 · Oct 14, 2003

brucie said:
In post <[email protected]>
Pengiun3 said...

it should be fine. NS version? URL?

Hmm, Mozilla 1.0.1 on linux RH8. Netscape 4.61 on OS/2. IE6 on Windows.

I've posted the mock up on http://4.7.104.9/Index.html

Thank you,

David

Toby A Inkster · Oct 14, 2003

Pengiun3 said:
I've posted the mock up on http://4.7.104.9/Index.html

which contains:

<td><input{width:100%;} type="submit" name="UID2 Change"
value="Change"></td>

Ah I think you mean:

<td><input style="width:100%;" type="submit" name="UID2 Change"
value="Change"></td>

or better still, between <head> and </head>:

<style type="text/css" media="screen,projection">
input.wide { width:100%; }
</style>

and then for your input element:

<td><input class="wide" type="submit" name="UID2 Change"
value="Change"></td>

Mark Parnell · Oct 14, 2003

Sometime around Tue, 14 Oct 2003 07:57:52 +0100, Toby A Inkster is reported
to have stated:

or better still, between <head> and </head>:

<style type="text/css" media="screen,projection">
input.wide { width:100%; }
</style>

Or better again,

<link rel="stylesheet" href="foo.css" media="screen,projection">

And in foo.css:

input.wide { width:100%; }

Pengiun3 · Oct 15, 2003

Toby said:
Pengiun3 wrote:

which contains:

<td><input{width:100%;} type="submit" name="UID2 Change"
value="Change"></td>

Ah I think you mean:

<td><input style="width:100%;" type="submit" name="UID2 Change"
value="Change"></td>

or better still, between <head> and </head>:

<style type="text/css" media="screen,projection">
input.wide { width:100%; }
</style>

and then for your input element:

<td><input class="wide" type="submit" name="UID2 Change"
value="Change"></td>

Thanks Toby. That worked for me. I'm still rather new to HTML 4 and
below. I hadn't read much about CSS so it hadn't occured to me to look
there for an answer. I was hoping there was a variant of the size
parameter.

David

Pengiun3 · Oct 15, 2003

Mark said:
Sometime around Tue, 14 Oct 2003 07:57:52 +0100, Toby A Inkster is reported
to have stated:

Or better again,

<link rel="stylesheet" href="foo.css" media="screen,projection">

And in foo.css:

input.wide { width:100%; }

Thanks Mark.

I'll read up on CSS. I was hoping not to rely on too many new
technologies. I'd like to support even old browsers. But all this
seems to be compatible so its well worth including.

David

Mark Parnell · Oct 15, 2003

Sometime around Wed, 15 Oct 2003 00:58:31 GMT, Pengiun3 is reported to have
stated:

Thanks Mark.

You're welcome.

I'll read up on CSS.

Well worth the effort. Ask brucie for some links.

I was hoping not to rely on too many new
technologies.

CSS is hardly new - the CSS1 specs were published in 1996, and CSS2 (the
current version) in 1998.

I'd like to support even old browsers. But all this
seems to be compatible so its well worth including.

CSS is ideal because browsers that don't understand it still get full
access to the content. Except browsers like NS4, which pretend to
understand it, and screw it up completely. But it is easy enough to hide
the CSS from non-conforming browsers - see
http://w3development.de/css/hide_css_from_browsers/

jadecloward · Apr 5, 2012

Style or Set a Width to Text Buttons in HTML

<input style="width:200px;" type="submit" name="Change"
value="Change">...
*Include here inline style.
This works.

<Button ...> display is fine, except for two things	1	Oct 23, 2023
Radio button inside input element	3	Mar 29, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Function call from button to automatic	7	Mar 17, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
"input-group-text" help	7	Aug 10, 2023
How Do I Set text on an Image and use the image as a border?	7	Mar 16, 2023

How is a text button width set?

Pengiun3

brucie

Pengiun3

brucie

Pengiun3

Toby A Inkster

Mark Parnell

Pengiun3

Pengiun3

Mark Parnell

jadecloward

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads