bmccleary
asked on
Input tags that are 100% width
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!
<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!
What browser(s) are you using, bmccleary?
If you're using really, really long fields, perhaps you should display them in a textarea instead?
ASKER
See the following for an example:
http://www.dynafile.com/~fieldwidth.htm
http://www.dynafile.com/~fieldwidth.htm
ASKER
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
Target browsers: ALL / IE 4.0+, NS 4.0+, Opera 5.0+
Testing browser: IE 6.0
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. ?!?
But you can find out what the user's screen size is using javascript, and easily do that. ?!?
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.
The result would still appear to be dynamic, but it would simply take more code.
ASKER
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?
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?
ASKER
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.
The pop-up window is 300 pixels wide and the table is is
set to be 100% of the pop-up window width.
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.
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;".
ASKER
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.
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.
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.
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.
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);
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);
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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:
https://www.experts-exchange.com/questions/20555323/Points-for-BardicStorm.html
<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:
https://www.experts-exchange.com/questions/20555323/Points-for-BardicStorm.html
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['myfieldspeci
}
</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>
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['myfieldspeci
}
</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>
Thanks,
OKSD