List boxes and changing width.

[eva21]

I need some major help on this so any input would be greatly appreciated. I have the following list box:

echo("<Select size=3 MULTIPLE style='width: 235px; font-size: 9pt;' onMouseover='changeWidth(" . $rows['id'] . ")' onMouseout='changeWidthBack(" . $rows['id'] . ")' onchange='getMedia(" . $rows['id'] . ")' name='" . $rows['id'] . "_t[]' id='" . $rows['id'] . "_t'>");

 

And I have the following JS functions:

function changeWidth(x)

{

document.getElementById(x + '_t').style.width = '';

}

function changeWidthBack(x)

{

document.getElementById(x + '_t').style.width = 235 + 'px';

}

 

Everything works fine, it grows a bit bigger so I can actually see the whole setence. Except it completely wrecks my table and I was wondering if there is a way to expand this list box using mouse over without wrecking my design? Please any examples or thoughts would be great thanks!

[Ken2k7]

Not to be picky on your PHP, but if you're going to use $rows['id'] so many times, why not store it in a variable?

 

Give the table cells (<TD>) a width.

[eva21]

Ive done the td width but it still wrecks my table when my mouse goes over it. How can I make the TD width stand still but have the list boxes grow?

[Ken2k7]

I suggest doing it with CSS, but if you change a TD, you have to make sure you change all the TDs in that column. I would just give each TD in that column a class and use CSS to set the width. Setting it for one won't work.

[eva21]

All of the TD has the same width the following:

<td class="train" style='width: 200px'>

 

But the table still grows.

[Ken2k7]

Define "grows". Any previews I may look at?

[eva21]

Sorry no i dont have an example.

 

It grows with the list box. For example I have a long setence and it makes the cell grow which makes the table itself expand. I just want some way to keep it from growing, but be able to make the list box bigger so the user can see the whole setence. If this is possible i am hoping. I was thinking of forcing the <td> to be one size regardless of how big the list box grows? Not sure if that would be good or not.

[eva21]

Really? No one can tell me anything? I put my table to fixed which works good but for some reason it pushes all my elements together and you cant see half my list box. I tried specifying the td width but it doesnt listen??

[Axeia]

tried overflow: hidden; on the set width td to hide it

or overflow: auto; to make it add a scrollbar if they content is 'too wide'.

 

Although I do remember this not working like I wanted it to, so you might have to add display: block;... or simply add a div with the width inside the table cell with the overflow.

[eva21]

Add display:block; where to the table tag?

[Axeia]

td { display: block; }

but most likely it's going to cause more issues than it's going to solve

 

<td><div></div></td> and

td>div{ width: 200px; overflow: auto; }

would be a better idea.