How to change the user control or HtmlTable position at runtime?

Leo · Jan 3, 2005

I created a user control which is some text contained in a HtmlTable.
I put this control into main form. I would like to have the ability to
move this control around in the main form. I think one way to do this
is to change the style of this control at runtime ("Left:xx px; Top:xx
px"). Another way is to move the HtmlTable in the control (i.e. change
the style of it). However I couldn't figure out how to let it work. At
design time, I changed the style of the control (Top: 100px). However
at runtime, the contrl still goes back to the original location(Top :
100px). Any suggestion? Thanks in advance.

Leo

Ken Cox [Microsoft MVP] · Jan 4, 2005

Hi Leo,

I hope I understand what you need to do... anyway here goes.

Let's say this is the content of your usercontrol with the table called
txtmove.ascx:

<%@ Control Language="vb" AutoEventWireup="false"
Codebehind="txtmove.ascx.vb" Inherits="p4320work.txtmove"
TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<table runat="server" id="Table1" style="LEFT: 200px; POSITION: absolute;
TOP: 100px" cellspacing="1"
cellpadding="1" width="300" border="1">
<tr>
<td>This is the text</td>
</tr>
</table>

You add the user control to your .aspx page so it looks like this:

<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="usetxtmove.aspx.vb" Inherits="p4320work.usetxtmove"%>
<%@ Register TagPrefix="uc1" TagName="txtmove" Src="txtmove.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>usetxtmove</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<uc1:txtmove id="Txtmove1" runat="server"></uc1:txtmove>
<asp:button id="Button1" style="Z-INDEX: 101; LEFT: 48px;
POSITION: absolute; TOP: 72px" runat="server"
Text="Button"></asp:button>
</form>
</body>
</html>

Notice that the positioning is GridLayout, not flow.

In the code behind, get a reference to the UserControl and within that
reference, get a reference to the table ("Table1").
With the reference, change the table's style attribute to use absolute
positioning, giving it the new coordinates.

Private Sub Button1_Click _
(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Button1.Click
Dim usrcntrl As UserControl
Dim tbl As HtmlTable
usrcntrl = Page.FindControl("Txtmove1")
If Not IsNothing(usrcntrl) Then
tbl = usrcntrl.FindControl("Table1")
If Not IsNothing(tbl) Then
tbl.Attributes.Item("style") = "LEFT: 400px; " & _
"POSITION: absolute; TOP: 200px"
End If
End If
End Sub

When you click the button, the table should jump to the new position.

Does this help?

Ken
Microsoft MVP [ASP.NET]
Toronto

How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Need help making the position of an infinite animation sticky	1	Dec 18, 2022
How to change the color in this script	1	Sep 9, 2022
How to start, if at all ?	2	Apr 18, 2022
Change control type at runtime	3	Jan 11, 2007
How to use PDF-lib and how to center each line of texts on the page?	1	Aug 16, 2023
ATOM-Settings: IDE-PHP could not launch your PHP runtime: how to proceed?	1	Mar 2, 2020
Image shifts to the right when export the page to pdf	4	May 5, 2023

How to change the user control or HtmlTable position at runtime?

Leo

Ken Cox [Microsoft MVP]

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads