Custom control absolute positioning

Posted on 2005-05-06
Last Modified: 2010-04-07

I've build a couples of web controls and I was wondering how can we made those control behave like MS builtin controls with absolute positioning.

I think I should implement top and left properties in my controls and then render the server "style" tag, but I don't really know how to do that.

Here's the code of one of the simpliest control.

Option Explicit On
Option Strict On

Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls

Public Class ctlStatus
    Inherits Control

    Dim _message As String
    Dim _icon As Integer
    Dim _pict As String
    Dim _col As String
    Dim _style As String

    Property Message() As String
            Return _message
        End Get
        Set(ByVal Value As String)
            _message = Value
        End Set
    End Property

     Property Icon() As Integer
            Return _icon
        End Get
        Set(ByVal Value As Integer)
            _icon = Value
            Select Case _icon
                Case 0
                    _pict = "./images/stats_nothing_big.png"
                    _col = "#cdcbbc"
                Case 1
                    _pict = "./images/stats_warning_big.png"
                    _col = "yellow"
                Case 2
                    _pict = "./images/stats_error_big.png"
                    _col = "red"
                Case 3
                    _pict = "./images/stats_critical_big.png"
                    _col = "red"
                Case 4
                    _pict = "./images/stats_info_big.png"
                    _col = "green"
                Case Else
                    _pict = "./images/stats_nothing_big.png"
                    _col = "#cdcbbc"
            End Select
        End Set
    End Property

    Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
        writer.Write(("<span id=""Label1"" style=""Z-INDEX: 101; LEFT: 124px; POSITION: absolute; TOP: 760px"">") & vbCr)

        writer.Write(("<DIV style=""Z-INDEX: 101; WIDTH: 100%; POSITION: relative;HEIGHT: 36px"" >"))
        writer.Write(("      <TABLE id=""Table3"" style=""BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; Z-INDEX: 101; LEFT: 0px; BORDER-LEFT: gray 1px solid; WIDTH: 100%; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; TOP: 6px"""))
        writer.Write(("            borderColor=""black"" height=""21"" cellSpacing=""0"" cellPadding=""0"" width=""100%"" bgColor=""" & Me._col & """"))
        writer.Write(("            border=""0"">"))
        writer.Write(("            <TR>"))
        writer.Write(("                  <TD style=""WIDTH: 5%; FONT-FAMILY: tahoma"" align=""left""><P align=""center""><FONT style=""FONT-SIZE: 9pt; FONT-FAMILY: tahoma"" face=""Times New Roman"" size=""3""></FONT>&nbsp;</P>"))
        writer.Write(("                  </TD>"))
        writer.Write(("                  <TD id=""status_msg"" style=""FONT-WEIGHT: bold; FONT-SIZE: 9pt; WIDTH: 95%; FONT-FAMILY: tahoma"" align=""left"">" & Me.Message & "</TD>"))
        writer.Write(("            </TR>"))
        writer.Write(("      </TABLE>"))
        writer.Write(("      <IMG id=""status_img"" style=""Z-INDEX: 102; LEFT: 0px; WIDTH: 51px; POSITION: absolute; TOP: 0px; HEIGHT: 31px"""))
        writer.Write(("            alt="""" src=""" & Me._pict & """></DIV>"))

    End Sub
End Class

Question by:hqdev
    LVL 5

    Accepted Solution

    First, you'd be better off removing the html from your code-behind, setting label properties etc to take care of your Message etc. - maintenance for this kind of setup is yucky. Then you'll also have design time ability to deal with your layout (although it's much better to avoid dealing with absolute positioning with html. It's better to control it using flowlayout).

    I'm probably not answering your question, but have to sign off!


    Author Comment

    I finally use a HTML grid layout and put the control in it.
    LVL 5

    Expert Comment

    Sounds good - a much better approach (although you'll find that if you go with FlowLayout, you'll be happier in the long run - but no biggy - the big thing was getting it out of your code-behind).

    LVL 5

    Expert Comment

    Uh, my response was what the asker ended up implementing so I believe I should receive the points.



    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    I have developed many web applications with asp & and to add and use a dropdownlist was always a very simple task, but with the new, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
    Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
    Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
    This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor ( If you're looking for how to monitor bandwidth using netflow or packet s…

    745 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

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now