How can I make a table auto size to content (e.g. use the minimum size sufficient to show inner controls) in ASP.NET 3.5?
I have a table that has a couple of rows. Some rows are not always required to be shown (e.g. when all the controls in that row are hidden). I want those rows to be hidden (or size = 0) and consequently the table to become smaller.
Not knowing your exact setup, it's hard to give a specific answer to fit your need. If a table row is displayed on the page, it will take up at least one line unless you turn it off. One method would be to set the table row to runat="server", and then set visible="false" in your code-behind if the controls within are not displaying.
<tr id="tr" runat="server">
<td>Controls</td>
</tr>
In your code-behind:
if( ControlsNotShowing )
tr.Visible = false;
You might need to provide more detail, but I'll take a stab at it.
Table automatically size to their content if you do not specify a width attribute of the table and td cells. So that is the easy part.
The question about showing or hiding rows is probably needs more detail. If you are trying to show/hide from code behind/server side, you can make the row a server control and set its Visible property:
<tr runat="server" id="row1">
<td>Hi</td>
</tr>
And then in code behind, set the Visible property
row1.Visible = false
If you want to hide the row on the client side, you can use javascript. I'll leave that to you or another question, but, if you do hide a row using javascript, the table will automatically resize itself if the row that was removed had the widest content.
Related
I created a asp.net web page and I have a html table 16 columns wide with a datalist control on every column. I need to give the look of a gridview control, (One column of data next to the other) but somehow there is a lot of white space in the Table Column around the datalist controls, how can I reduce this to the minimum so each column show next to each other?
Make sure you don't have the width of your outer table set to 100%.
Perhaps a dump of the markup would be useful here.
That will help:
<Table Style="padding:0px; cell-spacing:0px;">
...
</table>
I have a table, and one of the cells has dynamically generated content.
I want to have a background image that is exactly the same size as the cell. (ie not tiled, but stretched).
I've found a very good reference here, which tells you how to do it in Javascript. This example solves the problem by placing an HTML DIV on the top and the bottom of the cell, then getting Javascript to work out the vertical pixel difference between them.
The biggest problem was that I declare the image as
<asp:Image ID="imgContentsBackground" CssClass="ContentsBackground" runat="server" ImageUrl="~/Images/MoneyColour3.jpg" />
but for some reason ASP.NET arbitrarily renamed the ID from "imgContentsBackground" to "ctl00_imgContentsBackground". Once I hardcoded that ID in the Javascript, the referenced example worked for me.
But I'm thinking - given the rich functionality of ASP.NET, is there a simpler way to determine the size and position of a table cell once the content has been generated, and make an image occupy those dimensions?
if hard-coding the generated name solves it then why don't you try this:
<%= imgContentsBackground.ClientID %>
I'm trying to fix the height of a Dojox 1.3 Datagrid to a single line (like Excel). The current functionality is to automatically increase the row's height when more data than will fit into a single line is available.
Is there an easy way to accomplish this? It seems like it should be built in functionality for a datagrid, conisidering that this is the default behavior for spreadsheets.
Thanks for the help
I think you can.
Here is what I've been experimenting with:
In class .dojoxGridCellContent, add:
white-space:nowrap;
overflow:hidden;
For my "Squeeze/Expand" functions, I use a little function to dynamically change a class attribute and then I re-paint the grid.
I'm a firm believer in the need to be able to crunch rows (both in Excel and in html) down to 1 "row" high in order to facilitate vertical visual scanning (truncating cell contents as necessary) and then to be able to expand them out again to see the full contents in a cell on any particular row.
Manually sizing the column to be wide enough to fit all the possible text in any given cell is a terrible solution if you have variable amounts of text in any given cell. For productivity apps, non-functional white space is the enemy.
I wish there were a way built in to Dojo to do this useful thing (also solving the perennial cross-browser conditional ellipses thing).
Found a hack!
use this as the column formatter:
function(obj){
return "<div style='height:15px;text-overflow:ellipsis'>"+obj+"</div>"
}
This is just a hack and I'm seeing some problem with the row selector. But anyway, hope this help you guys.
You can't set the height, but you can adjust the width. If you have a good idea how wide your cell will normally need to be in order to fit the string on one line you can set it in your < th > element to maximize the number of rows that fit onto one line.
<table //dojo grid properties>
<thead>
<tr>
<th width="90px" field="fieldName" ...>
Field Name
</th>
...
</tr>
</thead>
</table>
Hope this helps.
I have a number of GridView controls that I need to position side-by-side on a page. For example a GridView containing a list of items in a shopping basket, and a number of GridViews to the side showing pricing from a number of suppliers.
The columns are fixed width in the first GridView - meaning that the row height is variable depending on the amount of text.
So, the question is this - is there any way to discover the individual row heights of the first data-bound GridView such that I can alter the other GridViews to correctly align?
The Row.Height property of the grid after databinding is empty as the height has not been explicity set.
thanks!
I don't know of any way to do this in .Net, you can use javascript, maybe set a .Net hidden field on load if you need it in code behind :
var h = document.getElementsByTagName('td')[0].offsetHeight;
Keep in mind this height will also include any cell padding or spacing you have set. Also, this assumes you're not explicitly setting the height in CSS which based on your question I assume you are not.
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
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.
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:
Get the <td> clientWidth and clientHeight.
Set the <td>'s width and height to those px values (so they're no longer relative)
Swap the text for the input
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.