Rick Strahl's Weblog  

Wind, waves, code and everything in between...
.NET • C# • Markdown • WPF • All Things Web
Contact   •   Articles   •   Products   •   Support   •   Advertise
Sponsored by:
West Wind WebSurge - Rest Client and Http Load Testing for Windows

Custom Control Block elements in the ASP.NET Designer


:P
On this page:

Getting an ASP.NET control to display properly in the designer can be a bit of the chore because the designer doesn’t do real well when it comes to rendering controls based on block tags, like <div> or <table>. The VS.NET designer renders controls into a block that appears to be a self-sizing <span> tag or equivalent, so if you have block content the designer usually mucks up the display.

 

For example, here’s a control that renders as a DIV in the designer:

 

The control should not show the percentage tag on the same block line as the Progress control. The code that generates this uses a DIV tag with a bunch of attributes. It doesn’t matter whether the output from this is generated in the Render() method of the control or a separate ControlDesigner the inline behavior is the same.

 

This is pretty annoying in many cases because it throws off your design. In some cases you may get around this by explicitly adding HTML <br /> tags into your markup, which will do the right thing both at design time and runtime, but in some cases a break is just not what you want to put into the HTML.

 

So the workaround I came up for this behavior is to wrap the control into another <div> tag and force it to 100% for the designer output:

 

protected override void Render(HtmlTextWriter writer)

{

 

    if (this.DesignMode)

      writer.Write("<div style='width:100%'>");

 

       

    writer.Write("<div class='" + this.CssClass + "' style='height:" + this.Height.ToString() + ";width:" + this.Width.ToString() +

                 ";text-align:left;padding:" + this.CellPadding.ToString() + "'>");

 

 

// …  render your content

 

    writer.Write("</div>\r\n");

   

    if (this.DesignMode)

        writer.Write("</div>");

}

 

The result looks like this in the designer:

 

 

which is a much closer match to what the control will actually render at runtime. Note that now block operations like centering also work properly because the control is no tightly bordered by the container.

 

 Not quite as smooth as I would have hoped, but it works. Maybe there’s a better way to force this but I couldn’t find it.


The Voices of Reason


 

Bertrand Le Roy
August 22, 2006

# re: Custom Control Block elements in the ASP.NET Designer

From the top of my head, you can add the display:block style attribute on the control's outer tag. If it doesn't work I can dig a little more.

Rick Strahl
August 23, 2006

# re: Custom Control Block elements in the ASP.NET Designer

Bertrand, I tried that but that didn't work. I think it's the container that VS creates that's not doing the right thing.

I guess don't worry about it in this version, but when the new editor comes this would be nice to get fixed. <div> and <table> etc. tags should respect their display:block status.

I've fought this on a number of occasions, but never really followed this through until the other day. The workaround works I suppose, but it shouldn't be necessary.

# DotNetSlackers: Custom Control Block elements in the ASP.NET Designer


Rick Strahl's Web Log
December 12, 2006

# 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.

Clothing
November 23, 2008

# Clothing

How Long is shipping

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