Minimum width for an INPUT BUTTON

FesterSXS · Sep 10, 2003

I have a row of 3 buttons at the bottom of a form (Calculate, Clear all Values, Print This Page)

I would like these buttons to all have the same minimum width which I have done by setting the width attribute in the stylesheet.

However....depending on the language chosen by the user, the buttons may have their text in a different language which may cause some of the text to become cropped by the fixed width buttons.

Is there a way of specifying a minimum width for a button which will allow it to grow if its text requires it???

many thanks

Tony

http://www.SpiraxSarco.com/cad

jemminger · Sep 10, 2003

the CSS2 spec includes "minimum-width" and "maximum-width" properties, but i'm not sure if any browsers support them yet. i know IE6 does not.

another way would be to script their width with js...

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
	<head>
		<title>setMinWidth();</title>
		<script type=&quot;text/javascript&quot;>
			window.onload = function setMinWidth() {
				var els = document.getElementsByTagName(&quot;input&quot;);
				
				for (var x = 0; x < els.length; x++) {
					if (els[x].type && 
						els[x].type.toLowerCase() == &quot;button&quot;) {
						if (parseInt(els[x].offsetWidth, 10) < 50) 
							els[x].style.width = &quot;50px&quot;;
					}
				}
			}
		</script>
	</head>

	<body>
		<form>
			<input type=&quot;button&quot; value=&quot;f&quot; /><br/>
			<input type=&quot;button&quot; value=&quot;fo&quot; /><br/>
			<input type=&quot;button&quot; value=&quot;foo&quot; /><br/>
			<input type=&quot;button&quot; value=&quot;fooo&quot; /><br/>
			<input type=&quot;button&quot; value=&quot;foo bar&quot; /><br/>
			<input type=&quot;button&quot; value=&quot;once upon a time&quot; /><br/>
			<input type=&quot;button&quot; value=&quot;there was a very long button value&quot; />
		</form>
	</body>
</html>

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); }

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Minimum width for an INPUT BUTTON

FesterSXS

Programmer

jemminger

Programmer

Similar threads

Part and Inventory Search

Sponsor