Click here to Skip to main content
Click here to Skip to main content
Go to top

Positioning your UI elements in a WebControl

, 23 Aug 2002
Rate this:
Please Sign up or sign in to vote.
Howto solve the problem of positioning your UI elements in a WebControl.

Introduction

There are two ways of creating controls that can be used in an ASP.NET application. The first way is an UserControl (.ascx) and is fairly easy to create as you can use the Visual Studio to position your controls. The disadvantage of UserControls is that they can't be reused easily as you have to copy them from one web application to another web application. The second way is to create a WebControl, these controls are more portable as they exist in a separate DLL and can be added to your palette. However you cannot use Visual Studio to design them via drag & drop.

First attempt

Because I personally prefer the reuse aspect, I decided that I would always create my controls as WebControls as also the future benefit would outweigh the initial costs. So I created my first WebControl which was a DropDownList with a Label control.

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

namespace ManyMonkeys.Web.ControlLibrary
{
    /// <summary>
    /// A DropDownList with a named label.
    /// </summary>
    [DefaultProperty("Text"), 
    ToolboxData("<{0}:LabelledDropDownList 
       runat="server"></{0}:LabelledDropDownList>")]
    public class LabelledDropDownList : 
       System.Web.UI.WebControls.DropDownList, INamingContainer
    {
        Label lblHeader = new Label();
    
        [Bindable(false), 
        Category("Appearance"), 
        DefaultValue("")] 
        public string Text 
        {
            get
            {
                return lblHeader.Text;
            }

            set
            {
                lblHeader.Text = value;
            }
        }

        /// <summary> 
        /// Render this control.
        /// </summary>
        /// <param name="output"> 
        /// The HTML writer to write out to </param>
        protected override void Render(HtmlTextWriter output)
        {
            lblHeader.RenderControl(output);
            output.WriteLine("<br>");
            base.Render(output);
        }
    }
}

Which once added to the palette and then dragged onto a form, looked like this.

Well that wasn't so hard, was it? Lets run it up and view it in IE.

Ah. Now as you can see from above WYSISYG is not a term we can use anymore, when dealing with Visual Studio. But how do we fix it?

Solution

The clue is in the positioning of the DropDownList control. It has style tags that cause it to be positioned at a specific location on the screen. But they are not being applied in the same way as they are, when viewed in Visual Studio. To fix this, we need to apply the style tags to both the elements that represents the Label and the DropDownList. However it is easier to wrap both the Label and the DropDownList in a <div> tag and apply the styles to it.

    /// <summary> 
    /// Render this control.
    /// </summary>
    /// <param name="output"> 
    /// The HTML writer to write out to </param>
    protected override void Render(HtmlTextWriter output)
    {
        // get the styles that we want to apply to the div tag
        output.AddStyleAttribute("LEFT",this.Style["LEFT"]);
        output.AddStyleAttribute("TOP",this.Style["TOP"]);
        output.AddStyleAttribute("POSITION", this.Style["POSITION"]);

        // remove the styles we have already applied
        this.Style.Remove("LEFT");
        this.Style.Remove("TOP");
        this.Style.Remove("POSITION");

        // draw our control
        output.RenderBeginTag("div");
        lblHeader.RenderControl(output);
        output.WriteLine("<br>");
        base.Render(output);
        output.RenderEndTag();
    }

Now when you view the control in Visual Studio it looks exactly the same as it did before, however when you view it in IE all is well.

Now it should be noted that you have to call AddStyleAttribute before you start to render you tag using BeginRenderTag, in order to apply the styles to it.

Conclusion

I hope that this small article will help other developers avoid the grief I initially had, when creating WebControls and that they will not be turned off from creating controls that can be reused. I have added this simple fix to many controls that I had originally created as UserControls and now they all exist in a library that I can apply to many web applications. The added advantage is that if I find a bug in a control (usually in the client-side JavaScript), I only have to fix it in one location.

Please spend a moment to rate this article. Your feedback is important to me.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Shaun Wilde
Software Developer (Senior) MYOB
Australia Australia
All articles are supplied as-is, as a howto on a particular task that worked for me in the past. None of the articles are supposed to be out-of-the-box freeware controls and nor should they be treated as such. Caveat emptor.
 
Now living and working in Australia, trying to be involved in the local .NET and Agile communities when I can.
 
I spend a good chunk of my spare time building OpenCover and maintaining PartCover both of which are Code Coverage utilities for .NET.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralGood tip Pinmemberabhiace2-Mar-06 9:36 
GeneralPositioning WebControls (checkbox) in an ASPX Page PinmemberXavito27-Sep-04 7:20 
GeneralUploading and Downloading of files between a Browser and Server PinmemberVenkataSridharRao Chadalla21-Jun-04 0:16 
GeneralRe: Uploading and Downloading of files between a Browser and Server PinmemberShaun Wilde21-Jun-04 8:35 
GeneralRe: Uploading and Downloading of files between a Browser and Server PinmemberVenkataSridharRao Chadalla22-Jun-04 3:09 
GeneralRe: Uploading and Downloading of files between a Browser and Server PinmemberShaun Wilde22-Jun-04 9:54 
Questionthis is the control class. but how do i use it from my app ???? Pinmemberiddo2k9-Oct-03 0:37 
AnswerRe: this is the control class. but how do i use it from my app ???? PinmemberShaun Wilde9-Oct-03 8:31 
GeneralCSS PinsitebuilderPaul Watson17-Aug-03 21:22 
GeneralRe: CSS PinmemberShaun Wilde18-Aug-03 1:31 
GeneralPositioning in a Netscape browser Pinmemberwajman15-Apr-03 0:33 
GeneralRe: Positioning in a Netscape browser PinmemberShaun Wilde15-Apr-03 2:14 
GeneralRe: Positioning in a Netscape browser Pinmemberwajman15-Apr-03 21:53 
GeneralRe: Positioning in a Netscape browser Pinmemberwajman16-Apr-03 1:31 
Generalfor Shaun... Pinmemberbyblos24-Aug-02 0:58 
GeneralRe: for Shaun... PinmemberShaun Wilde24-Aug-02 5:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 24 Aug 2002
Article Copyright 2002 by Shaun Wilde
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid