Click to See Complete Forum and Search --> : How to hardcode table cell width regardless of select option text length?


registering
08-12-2003, 10:09 AM
Hi all,
I have a website that uses PHP to get text values from a DB. It then uses javascript
to dynamically alter pulldown menus, populating them with these text values. However
I can't trust the DB to only give me text values that fit within my table, so I want to hardcode
the cell widths inside my table, so regardless of text length, cell 1 is 10% of the table, or 100
pixels, or whatever. Unfortunately, if the text length is greater than this minimum, all Hell
breaks lose and it's rendered horribly.

Is there a way to say "regardless of this text length, never make this cell bigger than 100
pixels"? I've even tried putting an entire table within <td></td> with a static pixel width
with no luck.

This is an example of what I'm talking about:



<body>
<form action="stacked.php?attr=.........." method="get">

<table width="800" cellpadding=4 cellspacing=0 border=1 rules=all>
<tbody>
<tr>

<td colspan=1>
<select name="host" onChange="updateSites(this.form, 0, this.selectedIndex-1)">
<option selected disabled value="spacekeeper">Please choose a host</option>
<option value="ABC">If this string is too long I'm screwed!</option>
</select>
</td>

<td colspan=1>
<select name="site" onChange="updateTables(this.form, 0, this.selectedIndex-1)">
<option selected disabled value="spacekeeper">Or if this one is too long the length is resized, pushing everything all over the place messing up alignment, et cetera!</option>
</select>
</td>

</tr>
</tbody>
</table>

</form>
</body>



When the user selects a menu option, javascript rebuilds the next menu, and resizes the cell.
I can post the javascript but I think it's an HTML TABLE misunderstanding on my part. For
example, I could just copy $MAX number of chars from the DB text string into the select option
and pad smaller values with blanks to guarantee all text values are the same size, but this
seems horrendous to me.

I know everyone here prefers CSS to tables, but I want to learn basic HTML before jumping
into CSS.

Thanks for any pointers!

Fang
08-13-2003, 07:15 AM
Add style="width:100px;" to your select tag

pyro
08-13-2003, 08:10 AM
The problem with doing that is that you won't be able to read you long options text...

registering
08-13-2003, 09:19 AM
Fang> Thanks!! That works great for NS
and Safari, but for some reason IE 5.2.3
for Mac doesn't follow that rule strictly.
It still shifts things around if they
exceed the pixel value. :( But I didn't
know about the "style=width:" thing so
you gave me some new ideas. Thanks!

pyro> I know but what else can I do?
Shrink the font? Have the user scroll left
and right? Include a popup ballon? I'm
not sure what the nicest thing for the
user is. In reality we're talking about
~20 chars able to be displayed and the
longest reasonable text I might get is 30
chars, but about 85% fall <= 20. Any
tips?

pyro
08-13-2003, 09:32 AM
I guess as long as you can still read it from the 20 characters you can see (enough to know what the option is) it won't be a big deal, but if the users won't be able to tell what certain options are, that's not good.

registering
08-13-2003, 09:46 AM
I agree. There are enough characters you can definitely make-out what option you've chosen. Plus this is a test version so I'll be able to get customer feedback before actually releasing anything so if this is a big sticking point I can rethink the overall layout or get the DB to abbreviate things like "Average" to "Ave." and help that way. Thanks for the feedback!! :)

pyro
08-13-2003, 09:48 AM
You're welcome. Good luck, man... :)