?
Solved

asp.net tables

Posted on 2011-10-24
6
Medium Priority
?
181 Views
Last Modified: 2012-05-12
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.
0
Comment
Question by:dhenderson12
  • 3
  • 2
6 Comments
 
LVL 28

Expert Comment

by:strickdd
ID: 37019320
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
 

Author Comment

by:dhenderson12
ID: 37019397


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
 
LVL 13

Expert Comment

by:Pryrates
ID: 37020595
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:dhenderson12
ID: 37024057
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
 
LVL 13

Accepted Solution

by:
Pryrates earned 2000 total points
ID: 37025572
<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
 
LVL 13

Expert Comment

by:Pryrates
ID: 37025649
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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
Hello there! As a developer I have modified and refactored the unit tests which was written by fellow developers in the past. On the course, I have gone through various misconceptions and technical challenges when it comes to implementation. I would…
Integration Management Part 2
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …
Suggested Courses
Course of the Month16 days, 2 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question