?
Solved

Input tags that are 100% width

Posted on 2003-03-13
17
Medium Priority
?
584 Views
Last Modified: 2008-03-10
I have some forms that I use the tag
<input type="text" name="myfield" style="width:100%" value="">
This works great because it makes the form look "clean" beacuse all the input fields are the same length on the screen and I use tables to lay out the form and limit how wide I want the entire form.  

The problem is with the following tag example(which would be caused by dynamic database population):
<input type="text" name="myfield" style="width:100%" value="Some really really really really really really really long text...">

With this example, the value causes the input field to expand to display ALL of the text in the value field, instead of scrolling the text as would happen normally.  This causes the tables that are holding the form and all the fields to become really distorted because the field is so long.

I can fix the problem, and have the value "scroll" along the field box, with something like:
<input type="text" name="myfield" width="200px" value="Some really really really really really really really long text...">
- or -
<input type="text" name="myfield" width="42" value="Some really really really really really really really long text...">

But doing the above, I loose the capabilities to have all my fields neatly lined up and have the form look "clean".

Does anyone have any suggestions on how to keep the style="width:100%" attribute but still have the text field not expand when there is a lot of text in the value field.  Thanks!





0
Comment
Question by:bmccleary
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 3
  • +3
17 Comments
 
LVL 1

Expert Comment

by:OKSD
ID: 8133038
I don't quite understand your problem... the text field expands? It worked fine when I tried it... Could you post a few, full page examples?

Thanks,
OKSD
0
 
LVL 5

Expert Comment

by:Alopederii
ID: 8133087
What browser(s) are you using, bmccleary?
0
 
LVL 4

Expert Comment

by:whammy
ID: 8133131
If you're using really, really long fields, perhaps you should display them in a textarea instead?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:bmccleary
ID: 8133132
See the following for an example:
http://www.dynafile.com/~fieldwidth.htm
0
 

Author Comment

by:bmccleary
ID: 8133143
The fields are not necessarily "really" long, by they may be a bit longer than the table width.  I still need the scrolling capabilities.  

Target browsers: ALL / IE 4.0+, NS 4.0+, Opera 5.0+
Testing browser: IE 6.0
0
 
LVL 4

Expert Comment

by:whammy
ID: 8133266
Hmm, you say "Please do not suggest expanding the width of the table", etc.

But you can find out what the user's screen size is using javascript, and easily do that. ?!?
0
 

Expert Comment

by:Bardicstorm
ID: 8133408
I would suggest that whammy is correct. I have tried all the CSS properties and form hacks I can think of that might do what you want, but it would probably be better to use javascript to get the users browser width, then set your form elements and your table manually.

The result would still appear to be dynamic, but it would simply take more code.
0
 

Author Comment

by:bmccleary
ID: 8133519
O.K.,
Let's clarify the use of the table.  I don't want to get too in-depth in the code, but basically I have a pop-up window that appears with the form inside.  The pop-up window is 300 pixels wide and the table is is set to be 100% of the screen with.  This makes for a very easy, unclutter user interface.  When the user click on a certain button, a small form appears with 4 or 5 fields and they can fill the information in or modify the information which has been already populated from the database (in the value attribute).  I don't want the window or form to be the entire size of the screen, there is not enough information for that.  This method works great until, in the very rare occation, that some of the database values will contain text that will force the table to expand as shown in my example.  When this happens, the table then becomes larger than the pop-up window and scroll bars appear for the window and make the entire look and layout appear horrible.  The instructions that appear at the top of the form now are streached beyond the width of the window and the user has to scroll the window just to read the instructions.  Does this make sense?  Should I add more code to the example page to clarify?
0
 

Author Comment

by:bmccleary
ID: 8133527
Third sentence for the above should read:
The pop-up window is 300 pixels wide and the table is is
set to be 100% of the pop-up window width.
0
 

Expert Comment

by:Bardicstorm
ID: 8133538
so why not just set the table width to 300px and sixe the input fields accordingly..  you only need to set the fields at 100% width if your table and window will be changing size.  In your clarification, it doesn't seem that they will be.
0
 

Expert Comment

by:Bardicstorm
ID: 8133565
sorry, that should read: size the input fields accordingly.  If your window will always be 300px wide, your table can be 300px wide, or 100% wide, and then instead of using a style="width: 100%;" on the input tag, just use style="width: 300px;".
0
 

Author Comment

by:bmccleary
ID: 8133585
Bardicstorm,
Thanks... I gotta think about that one for a bit.  It seems simple, but we have litterally hundreds of these forms, all in different layouts, throughout our entire solution.  I've got to brainstorm about how this will affect all of our forms.  Another wrench in the mix is that some of the forms can be quite complex with many input fields, check boxes, buttons, text fields, etc.  I need to find out how all the forms will be affected.  Again, I just wanted to dummy down my question so that I don't overwhelm you guys with miscellaneous code.
0
 
LVL 4

Expert Comment

by:whammy
ID: 8135813
After your clarification, I think Bardicstorm's solution (using an exact pixel width) would be the simplest route.

That shouldn't resize your popup (although I would probably use 280px width text field (or something like that, of course you'd probably have to experiment for the best look cross-browser) for a 300 pixel width popup, to leave a little white space).

In this case the user would just have to scroll in the text field for really long entries.
0
 

Expert Comment

by:Bardicstorm
ID: 8137677
To tell you the truth, I'm glad you asked the question the way you did. It got me thinking as to whether or not it was possible to actually size form fields dynamically strictly with a few style elements. Unfortunately, I couldn't find one, but I am still looking since functionality like that would be extremely useful.

Also, whammy is correct in that it would take some time to find just the right width. I know that usually in IE you have to leave the 20 pixels for the verticle scrollbar, whether it's there or not.

Incidently, it may help you on one of your projects, but I found a long time ago that sometimes it's easier to resize a pop-up windo after it's been opened instead of using the open.window size methods (based on the content in the particular pop-up). The following Javascript functions do this in IE4+ and NS4+

// move the screen position of the window to the specified x and y offset
window.moveTo(X, Y);

// move the screen position of the window by the specified x and y offset
window.moveBy(X, Y);

// scroll the window to the specified x and y offset
window.scrollTo(X, Y);

// scroll the window by the specified x and y offset
window.scrollBy(X, Y);

// set the size of the window to the specified width and length
window.resizeTo(X, Y);

// change the current size of the window by the specified x and y offset
window.resizeBy(X, Y);
0
 
LVL 1

Accepted Solution

by:
strAtEdgE earned 2000 total points
ID: 8140219
This is a much more elegant solution than Bardicstorm's, in my opinion. Based on your example:

<html>
<head>
<script>

function populate()
{
 document.all['myfieldspecial'].value = "Some really really really really really really really long text...";
}

</script>
</head>
<body onLoad='populate();'>
<form name="myform">
See how form in the following table is nice and "clean" and is exactly 200 pixels wide <br>
with each field being exactly the same width as the table column that it fits in?<br>
This is what I have and what I want by using style="width:100%"
<table width="200px" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <input type="text" name="myfield" style="width:100%" value="Some text">
      <input type="text" name="myfield" style="width:100%" value="Some other text">
      <input type="text" name="myfield" style="width:100%" value="Some more text">
      <input type="text" name="myfield" style="width:100%" value="Even some more text">
    </td>
  </tr>
</table>
<p>&nbsp;</p>
This table and form is <b>exactly</b> the same code as above, <br>
but since the 5th field has a lot of text in the "value" field, <br>
the table is distorted and is now longer than 200 pixels wide.<br>
The 5th field got expanded and does not "scroll" the text
<table width="200px" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <input type="text" name="myfield" style="width:100%" value="Some text">
      <input type="text" name="myfield" style="width:100%" value="Some other text">
      <input type="text" name="myfield" style="width:100%" value="Some more text">
      <input type="text" name="myfield" style="width:100%" value="Even some more text">
      <input type="text" name="myfieldspecial" style="width:100%" value="">
    </td>
  </tr>
</table>
<p>&nbsp;</p>
Beacuse the following table does <b>not</b> use style="width:100%"
it scrolls the text in the 5th field properly, <br>
but the fields do not expand to fill the width of the table <br>
Please do not suggest to change the width of the table, <br>
because the table will actually be determined by the users screen
<table width="200px" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <input type="text" name="myfield" value="Some text">
      <input type="text" name="myfield" value="Some other text">
      <input type="text" name="myfield" value="Some more text">
      <input type="text" name="myfield" value="Even some more text">
      <input type="text" name="myfield" value="Some really really really really really really really long text...">
    </td>
  </tr>
</table>
</form>
</body>
</html>
0
 

Author Comment

by:bmccleary
ID: 8162368
Thanks to all for your input.  I have tried all the methods and I am getting sort of frustrated at the results.  I tried the fixed width fields, which worked great, until I realized that the textual field name, which preceeds the input field box, is also dynamically generated from the database and varies in width.  When this happens, the fixed width then expands (or shrinks) which again throws off the layout.  STRATEDGE's solution was the only method that I tried that worked perfectly.  I never thought of using JS to fill out the values.  The only problem with this, is that I am going to have to change around a TON of code to make this work.  Instead of loading the values from a seperate JS function and called upon Body load, is there any way to do the following with your example STRATEDGE?

<input type="text" name="myfieldspecial" style="width:100%" value="" onLoad="this.value='my long text value';">

If I could do that, then everything would be great, but there is no "onLoad" event for a form field... I tried!

------------------------------------

BardicStorm, I didn't want to leave you out.  You advice was helpfull, so your points are at the following question:
http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20555323.html
0
 
LVL 1

Expert Comment

by:strAtEdgE
ID: 8176086
Yeah, no, javascript being an event driven language you need an event to key on and the 'onLoad' for the page is the best one you have. I know it sucks to have to know what values you are going to fill when you print out the header with the javascript before you even get to that part of the page, but I haven't found a more elegant solution to that.

If what you're trying to avoid is knowing that form fields you will populate before you get to printing out the form (might be an issue depending on how you've designed your backend), then you can always do this:

<script>

function populate()
{
 document.all['myfieldspecial'].value = myfieldspecial_value;
}

</script>

...

     <input type="text" name="myfieldspecial" style="width:100%" value="">
     <SCRIPT><!--
      var myfieldspecial_value = "Some really really really really really really really long text...";
      --></SCRIPT>
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question