I've got a tree view that can be anywhere from 1 level deep to nearly 6. Each node can be just a few letters or a couple of words totalling up to 20-30 characters.
How do I find the largest width of one of the node's text and add its depth offset to set the width of the treeview so it doesn't go through my borders?
If I need to add more info, let me know.
Edit:
Here's what I've currently got. I need to set the width of the panelLocations on page load so the tree view can load correctly inside of it.
<asp:Panel ID="panelLocations" runat="server" style="position:absolute;border:solid 1px #E0E0E0;padding:10px 5px 5px 10px;background-color:#F7F7F7;width:350px;display:none;" >
Search: <asp:TextBox ID="textboxLocationSearch" runat="server" AutoCompleteType="disabled" ToolTip="To find a store, type the 4 digit store number (e.g. 0001)" />
<asp:Button ID="buttonFindLocation" runat="server" Text="Find" OnClick="buttonFindLocation_Click" OnClientClick="LocationSelected();" style="width:60px;"/>
<input type="button" value="Cancel" onclick="HideLocations();" style="width:60px;"/>
<hr />
<asp:TreeView ID="TreeViewLocations" runat="server" OnSelectedNodeChanged="TreeViewLocations_SelectedNodeChanged" NodeIndent="10"></asp:TreeView>
</asp:Panel>
Since web browsers will render the content differently, your only option to find out the real width of the content is to use javascript to traverse the DOM elements and measure the width.
The cleanest and simplest solution is to specify a suitably large width for the container element, then specify a value of overflow:scroll to allow extra-wide content to be scrolled. It's pretty ugly to see scroll bars around elements in the page, but when you're using a tree-view structure, ugly is something you live with.
You can take advantage of the MeasureText method, in Graphics namespace. Basically it gives you back the size of a string supposed to be rendered in a certain font and size. Given a constant width for every intentation level (you know, tree lines, buttons/icons: you can measure it statically), you can assume needed width will be the largest of:
measuredText + (level * indentationWidth)
HTH!
Related
I have an Ajax Slider Extender on my textbox, I am using a style sheet to change the rail to color green, that's going fine and dandy. Here is my code for the slider...
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<div>
<asp:TextBox ID="SliderID" runat="server"></asp:TextBox>
<asp:SliderExtender ID="SliderExtender1" runat="server"
TargetControlID="SliderID"
BehaviorID="BoundControl"
Minimum="0"
Maximum="100"
RailCssClass="SliderRail"
Orientation="Horizontal"
EnableHandleAnimation="true"
Steps="100">
</asp:SliderExtender>
</div>
and here is my CSS so far...
.SliderRail {
position: relative;
height: 18px;
width: 100%;
background-color:green;
}
I know how to add an image to the handle, but what I am trying to figure out is how when I move the handle from step 0 to step 50, I need to mask over those steps with a dark grey and I can't really figure it out.
I have tried adding an image to the handle and have tried setting the width to a 100%, but that didn't work out at all for me.
My end result is figuring this problem out, then trying to replicate this using a multi handle extender when I have both handles at either end, it would do the same as the left handle, just backwards. Then I'll need to make sure that the handles can run over eachother...But that is the end result that I need to do.
I don't want to use JQuery or JavaScript, just want to keep it strictly css.
There isn't much documentation on using multi handles.
If this question has been asked a million times then I apologize, I must have been using the wrong search terms because I haven't found anything to tell me how to do this.
Thanks for all and any help
http://dotnetslackers.com/Ajax/re-70082_SliderExtender_layout_and_custom_appearance.aspx
Custom Appearance
In order to customize the slider’s appearance, we need to:
Provide a CSS class for the rail
Provide a CSS class for the handle
Provide an image URL for the handle’s image.
Steps to perform:
Create a CSS class for the slider’s rail. The CSS class must contain the following attributes:
The position attribute must be set to relative.
Default values for height and width attributes must be provided. The width value can be overridden through the Length property of the SliderExtender.
To embed a background image for the rail, use the background attribute.
2. Create a CSS class for the slider’s handle. The CSS class must contain the following attributes:
The position attribute must be set to absolute.
Values for height and width attributes must be provided.
3. Provide an image for the slider’s handle. The height and width sizes of the image must be equal to the height and width values specified in the handle’s CSS class.
Set the RailCssClass property of the SliderExtender instance to the name of the rail CSS class.
Set the HandleCssClass property of the SliderExtender instance to the name of the handle CSS class.
Set the HandleImageUrl property of the SliderExtender instance to the URL of the handle’s image.
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.
I add a user control dynamically (which only contains a table) to the Panel:
<asp:Panel ID="panel" runat="server"
ScrollBars="Horizontal" Width="160" Direction="LeftToRight">
</asp:Panel>
when I add e.g. two user controls, they have vertical direction. Why ? I want them set from left to right (horizontally)
The Direction property only sets whether the text is displayed left-to-right or right-to-left. It's a usability feature.
What you'll want to do is use CSS to perform what you need. Look into float: right;
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 %>
What is the exact pixel size of one column when I used the columns attribute to determine a width of an ASP.NET textbox control?
<asp:TextBox id="MyTextBox" runat="server" columns="10" />
The Columns property is mapped to the size-attribute on the rendered input-tag.
If size is 10, then the browser is supposed to render the input field in a size that would make 10 characters fit and be visible in the input field. But that only really works for monospace fonts, since in many other fonts "III" will not have the same pixel length as "MMM".
So usually you are better of just using CSS-width as Ryan said.
I always use:
style="width: 250px;"
That way you can set it exactly. Otherwise it's going to depend on the font-size of the textbox as well as the way the browser renders it.
Rows on the other hand is something I've always struggled with.
#Ryan Smith: I used your suggestion and modified it to make it scalable to the user montior settings.
style="width: 100%"