SnTT: field sizes on the web for dummies like me
Since I’m an admin, I don’t dabble in development that often. But when I do, it’s normally making an app that needs to look good on the web. I’ve done it for a long time and I used to use certain conventions.
One of those was determining height and width on text fields to present them to the web. It was always fairly easy. I learned to enter the information in the field’s style field on the properties tab. So for example, if I wanted a text field to present itself as 700 pixels wide by 120 pixels tall, I would put the following in the style field.
width=700; height=120
It worked great, my field would look perfect…in Internet Explorer. As I’m now a Firefox user, it’s important to me that my presentation is the same in both browsers. Firefox ignored my entries though, so I had to figure out the RIGHT way to enter that info.
Well, it was so simple that I feel like a real “dummy.” In order to help some of you new developers avoid the dummy tag, I’m here to show you how to easily get it to work as well in Firefox. And trust me, it is easy. A colon instead of an equal sign.
width:700; height:120
Yup, that. is. it. Now I know that pretty much every developer worth their weight KNEW this, but hey, I’m an admin.
Now, I can hear the Mac faithful saying “WHAT ABOUT SAFARI?” Well guess what, the above technique doesn’t work. Safari looks for a “textarea” which is not what Notes serves up by default when it does a text field on the web. But, there is another workaround that’s kind of kludgy, but will work.
All you do is make the text field a multi-value field. Not elegant, I know. But once you make it a multi-value field it makes it a “textarea” on the web, and then the height and width attributes take hold. So, doing it that way allowed my form to look the same in IE, Firefox and Safari.
I also know that you can do this with real style sheets too, and that’s probably preferrable, but for those times you need to make a quick change, this will do it. Any real developers want to post a a preferred method of doing this on their own SnTT posts?
September 15, 2006 @ 4:19 pm
It’s much easier and cleaner if you hide the editable text field, and create the textarea tag manually as passthrough HTML instead. Make the contents of the textarea a computed text presenting the contents of the field.
September 15, 2006 @ 4:21 pm
Well, that didn’t look very nice, now did it? Seems that you don’t handle international characters very well…
September 16, 2006 @ 4:46 pm
Though it’s been a while, I’ve used the multi-value workaround too. But I deselect all options for separating values… in general that assures that a field that I want to display as a textarea but only allow one value will remain single value.
September 19, 2006 @ 10:46 am
Hey Tim, when I deselcted all options for separating values, it reverted to a non-multi field. That’s why I used a semicolon, since no one ever uses a semicolon
Bummer on the international characters Peter. It’s not that “I” don’t handle them well, it’s that blogpshere doesn’t handle them well… heh