Try this html code in IE ( i have 6.0):
<HTML>
<style>
.mybox { padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; height: 19px; }
</style>
<input type="text" name="text1" value = "W" maxlength = "1" size = "1" class=mybox >
<input type="text" name="text2" value = "WWWWW" maxlength = "5" size="5" class=mybox >
</HTML>
You will notice that the width of the first box is much more than it is needed to show one char. setting the padding is not helping. Any ideas to reduce the display width??
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
Thanks Spunkey!! When I tried the above code, it reduced the width of the second box too.
For now, I did this:
<HTML>
<input style="width: 20px" type="text" name="text1" value = "W" maxlength = "1" size = "1" class=mybox >
<input type="text" name="text2" value = "WWWWW" maxlength = "5" size="5" class=mybox >
</HTML>
This works for the example, in my real application we have hundreds of such boxes.. so I welcome and appreciate all ideas.
Thanks
try this,
something with scripting
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function insrtspc()
{
var str = new String(form1.t1.value)
if (str.length >= 1)
form1.t1.size = str.length;
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1">
<input type="text" name="t1" size="1" onkeyup="javascript:insrts
</form>
</body>
</html>
assuming the second box in your example is to hold 5 characters, the below should work. Although not elegant by any stretch of the imagination.
I'd still recommend having a select box which contains all possible values you expect people to give you.
This will be much more standardised, much more presentable and much better looking IMO.
<HTML>
<style>
.small_box {width: 20px}
.large_box {width: 100px}
</style>
<input type="text" name="text1" value = "W" maxlength = "1" size = "1" class="small_box">
<input type="text" name="text2" value = "WWWWW" maxlength = "5" size="5" class="large_box">
</HTML>
If what you are trying to avoid is having to add style or class to each one you can size them dynamically at load time this way:
<html>
<head>
<title>none</title>
<script type="text/javascript">
function resizeIN()
{
x=document.forms[0].elemen
for (i=0;i<x.length;i++)
{
if (x[i].type=="text" && x[i].size=="1") x[i].style.width="1em";
}
}
onload=resizeIN;
</script>
</head>
<body>
<form>
<input type="text" size="5">
<input type="text" size="5">
<input type="text" size="1">
<input type="text" size="5">
<input type="text" size="5">
<input type="text" size="1">
<input type="text" size="5">
<input type="text" size="5">
<input type="text" size="1">
<input type="text" size="5">
<input type="button" value="hello">
</form>
</body>
</html>
Test for IE6 and Mozilla
BTW using 1em instead of 20px insures it will size to the width of one character no matter what size the user has their fonts set to.
Cd&
I do appreciate your service, and the time you spent with sample code. I thought the grade only meant how much your solution helped me. Frankly, in my case, if I cannot do it with a style sheet, it is not of much help to me, because of the large number of html pages we have, and all the pages have their own olload function. All they share is a .css file. It will be quite an effort for me to edit individual files and hence I am not going to use this solution.
I will be happy to change the grade if I can.
Thank you
Thanks for the explanation. Technically the grade reflects how much the response helped. However When something cannot be done the way you would like it to be done, then no answer could satisfy your need. Knowing the limitations of a given technology also helps even if it is not what you want to hear.
The technical definition is one thing. There is also the practical side from the expert viewpoint. Most of us are concerned more with helping and that is reflected in grades. If questions such as this are always graded as a C then there is no reason for us to respond. Ultimately questions like this would go without a response and you would continue searching for a solution that does not exist.
If you wish to keep the grade as is, I will espect that, but it shows in your grading history, and when experts see that it makes them reluctant to invest much time in trying to help. I am a page editor for this topic. I have both the authority and the tools to change grades. However, I am not going to interfere with your right to give the grade you want, because based on your explanation, it was reasonable in your view.
If another expert complained about the grade here I would change the grade, but it would not be proper or ethical for me to change my own grade against your wishes.
Cd&
I really had no idea what goes on with the grade...I thought it was merely a statistic.
In this case, it did help me confirm the technology limitation. And the solution you provided is the best possible. So I ask you, on the record, to change the grade to "A". I will be happy to contact other experts/editors to help approve this.
chennarh (and those that are viewing this page after-the-fact):
Since you already have a .CSS script, you could add
input.mybox {
width: 1em;
}
(or something like that) to your .CSS stylesheet, or a STYLE area on your page.
I used this for a 3-column table to make the INPUTs (and TEXTAREAs) to be 99% of their max width:
input,textarea {
width: 99%;
}
This made them fill the whole width, no matter how wide the screen was. For the record, I also added a size="20" (or whatever), so that when the window is resized too small, it reserves that space, so the browser will add a horizontal scrollbar if needed.
~gamers_anony
Business Accounts
Answer for Membership
by: SpunkeyPosted on 2004-05-20 at 09:38:53ID: 11118980
im afraid all you can do is set the width of the box to the smallest value you can, with the largest width character still visible. In this case, as you had done, the widest char is W. Therefore the code below will sort you out.
Although, as soon as someone puts an 'I' in the works you're going to have the same problem.
<HTML>
<style>
.mybox {width: 20px}
</style>
<input type="text" name="text1" value = "W" maxlength = "1" size = "1" class=mybox >
<input type="text" name="text2" value = "WWWWW" maxlength = "5" size="5" class=mybox >
</HTML>
my suggestion would be to use a <select> box and list all available options in that.
Cheers