Overlap Table Cells with Select Tag

[Meleagant]

All,

Don't know why I am having so much trouble with this.

I have an HTML table. When you click a row that row becomes 'Editable'. For example all of the tables cells have an INPUT tag created dynamically and added to the TD object. Problem is that one table cell is converted to a SELECT tag and not an INPUT. The text in the SELECT tag is way way too long and when I Mouse Over the SELECT tag I would like the select tag simply overlay the columns to the left.

I've been playing with absolute positioning, z-index, colSpan and a couple of other items and I can't figure out how to do this.

Any help would be greatly appreciated!

* Sine scientia ars nihil est
* Respondeat superior

 

[feherke]

Hi

You mean like this ?

<tr>
<td><input type="text"></td>
<td><select [red]style="width:100px"[/red]><option>very very very long text</option></select></td>
<td><input type="text"></td>
</tr>

You just have to specify the [tt]width[/tt] and it should work as you want.

This works in FireFox, Opera and Midori. And sadly not works in Konqueror. ( I guess Explorer is with Konqueror. )

Anyway, your question is not JavaScript, it belongs to forum215.

Feherke.

http://rootshell.be/~feherke/

 

[Meleagant]

Yes I was debating where to put it, and since I am dynamically creating the <Select> as well as the other <Input>s I decided to put it here.

What I want is to basically have the the <Select> portion of the tag at say a width of 60px. And then the <Option> part of the tag at say 250px.

Can't figure out how to do it. When ever I change the width of my select box (on say a mouseover event) it will bump out the column and then all of my other columns in the grid are either squished, squashed or their alignments from the header row are off. Tried absolute positioning which threw the box in front of the grid with out affecting the width of the parent cell, but then if I scroll the <Select> tag remains in the same place. Tried hiding by setting the overflow to visible on the mouseover event but no dice there either.

* Sine scientia ars nihil est
* Respondeat superior

 

[vicvirk]

You could mimic a drop down list using CSS/Javascript and have a hidden form that get populated with values which in turn get submitted...

Here's a start, there's lots more to do in order for it to properly mimic a drop down, but it should get you started.

Note: I slapped this together pretty quickly, so ignore the obvious poor coding with inline styles and javascript...I don't normally work like this...

If you do use the code, I'd like to see the final version, please, as it is something I'd like to see ...

Demo here:

http://vicvirk.com/_codesamples/makeshiftDropDown.html

<script>

	function showOptions(selBox) {
		document.getElementById(selBox + "Choices").style.display = "block";
	}

	function setSelection(intInput,strInput,selBox) {
		document.getElementById(selBox).innerHTML = strInput;
		document.getElementById(selBox + "Choices").style.display = "none";
		document.getElementById("selBox").value = intInput;
	
	}
</script>

<div onClick="showOptions('selectOne')" id="selectOne" style="padding:1px;width:150px;height:22px;background-image:url('ddl_bg.gif');">
Option One
</div>

<div id="selectOneChoices" style="display:none;width:300px;border:1px solid #000000;position:absolute;z-index:100;">
	<div style="width:300px;" onMouseOver="this.style.background='#cccccc';" onMouseOut="this.style.background='#ffffff';" onClick="setSelection(1,'Option One','selectOne');">Option One</div>
	<div style="width:300px;" onMouseOver="this.style.background='#cccccc';" onMouseOut="this.style.background='#ffffff';"  onClick="setSelection(2,'Option Two','selectOne');">Option Two</div>
	<div style="width:300px;" onMouseOver="this.style.background='#cccccc';" onMouseOut="this.style.background='#ffffff';"  onClick="setSelection(3,'Option Three','selectOne');">Option Three</div>
</div>

<br /><br /><br />
This is your actual form that you can hide, but populate with the values
<div id="frmData">
	<form>
		<input type="text" id="selBox" id="selBox" value="" />
	</form>	
</div>

TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.
----
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javascript enabled browsers