asp.net tables

I have an aspx page that uses html tables (i can change to asp:table if necessary).  I would like the table to appear the same way that the properties list in visual studio do:  col 1 = text (no sweat) and col 2 controls (textbox, dropdownlist, etc) take up the entire width and heigth of the table cell.

any help appreciated.
dhenderson12Asked:
Who is Participating?
 
PryratesCommented:
<html>
<head>
	<style type="text/css">
	td
	{
		height:30px;
		background-color:#ff0000;
	}
	
	INPUT{
	width:100%;
	height:100%;
	border: 0px solid #0000ff;
	}
	SELECT
	{
	width:100%;
	height: 100%;
	}
	</style>
</head>
<body>

<table width="500" style="border: 1px solid #000000" cellspacing="0" cellpadding="0">
	<tr>
		<td width="150">Col 1</td>
		<td width="350"><input type="text" value ="This is an input field with a large input. It does seem to fit here..." /></td>
	</tr>
	
	<tr>
		<td>Col 2</td>
		<td><input type="text" value ="This is an input field with a large input." /></td>
	</tr>	
	
	<tr>
		<td>Col 3</td>
		<td><input type="text" value ="This is an input field with a large input." /></td>
	</tr>
	
		<tr>
		<td>Col 4</td>
		<td><select>
			<option value="1">1</option>
		</select></td>
	</tr>
</table>
<br />
<input type="text" value ="This is an input field with a large input. It does seem to fit here..." style="width:350px; height:30px; border: 1px solid #000000" />
</body>

</html>

Open in new window


With that style in the code block above at least the boder concerning the textboxes seems to be fine over here.
Border calculating can be a b*tch. Have a look at the sample above. No border is set for the cells and the textbox fits perfectly like you can see in the "controlbox" outside the table.

If you calculate with border of cells you have to subtract those from the space that can be used for the controls. So they might take less input chars expected.

The cellboundary is calculated as part of the control itself, so 100% means including visible borders! Set the border to "0px solid #0000ff" or whatever color you like ;). That will erase the borders.

Depending on the browser there is am auto-spacing within the cells if nothing is specified. If I remember right, IE will give 2px, FF none. So it is always good to fill that property.

Sample above is tested with FF on MacOS.

The comboboxes will be a hard one to crack... on MacOX there will be no way to display them "full" filling, because the control is rendered with round-rects... so hard to test over here ;).

Maybe some pseudo-combox like from dojo (http://dojotoolkit.org/) might do the trick.

0
 
strickddCommented:
You can simply apply CSS attributes to the second column that make it a specified height and width and then do the same to the controls in those cells.
0
 
dhenderson12Author Commented:


I tried that here's the code (the table, rows, and cells are created dynamically) :

in aspx <head> section:
<style type="text/css">

      .props
      {
         height: 10px;
         width: auto;
      }
</style>

in code behind:

            foreach (TableRow ptr in pageTable.Rows)
            {
                foreach(TableCell ptc in ptr.Cells)
                {
                    ptc.BorderColor = System.Drawing.Color.Black;
                    ptc.BorderStyle = BorderStyle.Solid;
                    ptc.BorderWidth = Unit.Pixel(1);
                    ptc.Font.Size = FontUnit.XSmall;
                    ptc.ForeColor = System.Drawing.Color.Black;  
                    ptc.CssClass = "props";              
                }
            }
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
PryratesCommented:
try in your CSS something like that:
	INPUT{
	width:100%;
	height:100%;
	}
	SELECT
	{
	width:100%;
	height: 100%;
	}

Open in new window

this will force all input and select controls to fill 100% height and width of its parent control.

SELECT height 100% might not work with all browsers. FF on Mac OS works fine (what surprises me a little. Don't think IE will render it that way)

HTML sample code is attached.

Hope that helps.
<html>
<head>
	<style type="text/css">
	td
	{
		border: 1px solid #000000;
		height:30px;
	}
	
	INPUT{
	width:100%;
	height:100%;
	}
	SELECT
	{
	width:100%;
	height: 100%;
	}
	</style>
</head>
<body>

<table width="450" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td width="150">Col 1</td>
		<td width="350"><input type="text" /></td>
	</tr>
	
	<tr>
		<td>Col 2</td>
		<td><input type="text" /></td>
	</tr>	
	
	<tr>
		<td>Col 3</td>
		<td><input type="text" /></td>
	</tr>
	
		<tr>
		<td>Col 4</td>
		<td><select>
			<option value="1">1</option>
		</select></td>
	</tr>
</table>

</body>

</html>

Open in new window

0
 
dhenderson12Author Commented:
here's the issue with both solutions:
1. the border around around the control is always there, but grey, so I can see that it will not size to 100% of the cell height (is there a built-in margin inside the cell? I am specifying 0)
2. if the control sizes to 100%, it is beyond the cell boundry.

I tried hard-coding width and height, but the control still won't fill the cell.  Is there another method to try or should it be a different type of control? (instead of a table)
0
 
PryratesCommented:
Just tried combobox with "border: 0px solid #0000ff" and guess what: FF does fill the whole cell to the last pixel. Something learned :). So this might be a suitable solution even for FF on MacOS.
Safari of course has it's own head, but still kinda suitable if you ask me ;)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.