• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 185
  • Last Modified:

Custom control absolute positioning

Hi,

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
        Get
            Return _message
        End Get
        Set(ByVal Value As String)
            _message = Value
        End Set
    End Property

     Property Icon() As Integer
        Get
            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>"))
        writer.Write(("</span>"))

    End Sub
End Class

Thanks
0
hqdev
Asked:
hqdev
  • 3
1 Solution
 
ovalsquareCommented:
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!

Ted
0
 
hqdevAuthor Commented:
I finally use a HTML grid layout and put the control in it.
0
 
ovalsquareCommented:
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).

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

Thanks,

Ted
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now