Click here to Skip to main content
11,712,241 members (76,151 online)
Click here to Skip to main content

Positioning your UI elements in a WebControl

, 23 Aug 2002 CPOL 121.8K 773 48
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.

You may also be interested in...

Comments and Discussions

 
GeneralGood tip Pin
abhiace2-Mar-06 9:36
memberabhiace2-Mar-06 9:36 
GeneralPositioning WebControls (checkbox) in an ASPX Page Pin
Xavito27-Sep-04 7:20
memberXavito27-Sep-04 7:20 
GeneralUploading and Downloading of files between a Browser and Server Pin
VenkataSridharRao Chadalla21-Jun-04 0:16
memberVenkataSridharRao Chadalla21-Jun-04 0:16 
GeneralRe: Uploading and Downloading of files between a Browser and Server Pin
Shaun Wilde21-Jun-04 8:35
memberShaun Wilde21-Jun-04 8:35 
GeneralRe: Uploading and Downloading of files between a Browser and Server Pin
VenkataSridharRao Chadalla22-Jun-04 3:09
memberVenkataSridharRao Chadalla22-Jun-04 3:09 
GeneralRe: Uploading and Downloading of files between a Browser and Server Pin
Shaun Wilde22-Jun-04 9:54
memberShaun Wilde22-Jun-04 9:54 
Questionthis is the control class. but how do i use it from my app ???? Pin
iddo2k9-Oct-03 0:37
memberiddo2k9-Oct-03 0:37 
AnswerRe: this is the control class. but how do i use it from my app ???? Pin
Shaun Wilde9-Oct-03 8:31
memberShaun Wilde9-Oct-03 8:31 
GeneralCSS Pin
Paul Watson17-Aug-03 21:22
sitebuilderPaul Watson17-Aug-03 21:22 
GeneralRe: CSS Pin
Shaun Wilde18-Aug-03 1:31
memberShaun Wilde18-Aug-03 1:31 
GeneralPositioning in a Netscape browser Pin
wajman15-Apr-03 0:33
memberwajman15-Apr-03 0:33 
GeneralRe: Positioning in a Netscape browser Pin
Shaun Wilde15-Apr-03 2:14
memberShaun Wilde15-Apr-03 2:14 
GeneralRe: Positioning in a Netscape browser Pin
wajman15-Apr-03 21:53
memberwajman15-Apr-03 21:53 
GeneralRe: Positioning in a Netscape browser Pin
wajman16-Apr-03 1:31
memberwajman16-Apr-03 1:31 
Generalfor Shaun... Pin
byblos24-Aug-02 0:58
memberbyblos24-Aug-02 0:58 
GeneralRe: for Shaun... Pin
Shaun Wilde24-Aug-02 5:48
memberShaun 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 | Terms of Use | Mobile
Web04 | 2.8.150819.1 | Last Updated 24 Aug 2002
Article Copyright 2002 by Shaun Wilde
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid