text box giving problems on ASP.Net page

Question

I am designing a page to Add/Edit users - I used a repeater control and a table to display users. In users view the individual columns of the table row have labels to display a record values and when users click on edit button, the labels are hidden and text boxes are displayed for users to edit values - The problem is - as soon as the text boxes are visible, the table size increases - the row height and cells size becomes large. Is there a way to display the text boxes so that they take the same size as the labels

Answer 1

I'd use JS+CSS... You'll have to get your hands dirty for this one though. Visual Studio isn't going to help you much.

Here's how I'd do it:

1. Get the <td> clientWidth and clientHeight.
2. Set the <td>'s width and height to those px values (so they're no longer relative)
3. Swap the text for the input
4. In your CSS, make sure the input has no padding/margin/border and set width:100%, line-height:1em, and height:1em

When you switch back, make sure you un-set the <td> width and height so they return to automatic values.

You'll need to tweak this all slightly. I'm sure you'll have to play around with the padding on the <td> and perhaps set overflow:hidden but you should be able to do what you want.

Answer 2

Dealing with tables, the question is: can your labels span on multiple text rows (ie: can you have long texts)? If yes, you may encounter layout problems any way. If no, a simple approach can be creating a CSS Class:

.CellContent { display:block; width: ...; height: ...; }

with your preferred cell width/height. Just stay a bit "large" with your height.

Assign the class to both your label and textbox, and you should not get width/height changes when switching control (thanks to the display:block property).

Again, if you have long texts, you will still encounter issues, and may want to use multilines. In that case, I would suggest ignoring height problems: just set the width to be consistent, and always show a 3-4 lines textbox for editing. Users will not be bothered to see a row height change, if they are ready to type long texts.