Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs
Contact   •   Articles   •   Products   •   Support   •   Search
Ad-free experience sponsored by:
ASPOSE - the market leader of .NET and Java APIs for file formats – natively work with DOCX, XLSX, PPT, PDF, images and more

Getting tripped by Absolute Positioning in custom Controls


:P
On this page:

I got a report from a user today that one of my controls isn’t working correctly when using absolute positioning in the ASP.NET designer.  I never use absolute positioning and so I never actually noticed this before <blush>… The control renders fine and in the designer, but the control wasn’t movable in the designer when absolute positioning was set on the control. The Visual Studio designer lets you drag controls around when absolute positioning is on.

  

Well, it turns out that the control indeed didn’t work properly in the designer and it took some time to figure out what the problem was. The control is an error display control which basically renders an HTML Table into the page.

 

The problem is that if control rendering for design-time has any prefix or postfix tags around the ‘main’ control that hosts the positional styles, the control won’t be draggable in the designer.

 

In this case of the control I was working on I actually have a  a <div> wrapper I often place around block controls so they render properly in the designer. The control also had a trailing <br /> to add some extra white space (better served by padding in retrospect <s>). In both cases the main control is not the outer tag that the designer sees and hence it fails dragging controls around. Note it still renders correctly if you manually change the positional elements – it’s just the dragging that doesn’t work.

 

So if building a composite control that has potential outer wrappers at design time might require checking for the absolute positioning in the Render() or ControlDesigner code.

 

Something like this:

 

protected override void Render(HtmlTextWriter writer)

{

    if (Text == "" && !this.DesignMode)

    {

        base.Render(writer);

        return;

    }

 

    if (RenderMode == RenderModes.Text)

        Text = wwUtils.DisplayMemo(this.Text);

 

    string TStyle = this.Style["position"];

    bool IsAbsolute = false;

    if (TStyle != null && TStyle.Trim() == "absolute")

        IsAbsolute = true;

 

    // *** <Center> is still the only reliable way to get block structures centered

    if (!IsAbsolute && this.Center)

        writer.RenderBeginTag(HtmlTextWriterTag.Center);

 

    writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID);

    writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssClass);

    writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, this.CellPadding);

    writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "30px");

    writer.AddStyleAttribute(HtmlTextWriterStyle.Width, this.Width.ToString());

    writer.AddStyleAttribute(HtmlTextWriterStyle.TextAlign, "left");

    foreach(string Key in this.Style.Keys)

    {

        writer.AddStyleAttribute(Key, this.Style[Key]);

    }

   

    writer.RenderBeginTag(HtmlTextWriterTag.Table);

 

    writer.RenderEndTag();  // <table>

 

    if (!IsAbsolute)

    {

        if (this.Center)

            writer.RenderEndTag();   // </center>

 

        writer.WriteBreak();

    }

}

 

The same would apply with a ControlDesigner... 

 

Incidentally I had no luck with:

 

this.Style[HtmlTextWriterStyle.Position]

 

which didn’t properly return the “absolute” value for some reason, while:

 

string TStyle = this.Style["position"];

 

worked properly.

 

Posted in ASP.NET  

The Voices of Reason


 

# DotNetSlackers: Getting tripped by Absolute Positioning in custom Controls


A Continuous Learner's Weblog
December 11, 2006

# A Continuous Learner's Weblog: Links (12/11/2006)


Rick Strahl's Web Log
January 11, 2007

# Getting tripped by Absolute Positioning in custom Controls - Rick Strahl's Web Log

I ran into an issue today with a control that wasn't properly working in the designer when absolute positioning is used and the control couldn't be dragged around the designer surface.

# A Continuous Learner's Weblog: December 2006


Rick Strahl's Web Log
May 27, 2007

# Custom Control Block elements in the ASP.NET Designer - Rick Strahl's Web Log


Andre
February 01, 2008

# re: Getting tripped by Absolute Positioning in custom Controls

Hi .NET Surfer,
Everytime I search for a tricky subject on .NET I end up at your blog and it's helpful most of the times :)
I'm asking for your help on a simple question regarding Design-Time editors in Visual Studio 2005. If you could take a look at it, I'd really appreciate.

Question URL:
http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=2772365&SiteID=1

Thanks and keep up the good work.

West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2019