What HTML Surrounds Our HTML In The Designer?

[John Saunders]

I've been working with a custom control, which I've _finally_ gotten to look
right both in the designer and at run-time. Except for one little thing.

The page containing the control has the following HTML:

<DIV style="WIDTH: 100%; BACKGROUND-COLOR: #999999">
.... control goes here ...
</DIV>


<div style="POSITION:relative;LEFT:100%;width:0px;height:0px;">
<div style="POSITION:relative;LEFT:-24px;">
<span onmouseover="...;return true;" onmouseout="...;return true;"
id="_ctl0_control"
style="border-color:#999999;border-width:4px;border-style:Groove;width:0px;"<img src="../../images/ChevronDown_999999.gif"
id="_ctl0_control_Image" />
<input name="_ctl0:control:Hidden" id="_ctl0_control_Hidden"
type="hidden" />
</span>
</div>
</div>

Now, at runtime, this positions the image in the upper-right corner of the
surrounding div. But at design-time, the image is positioned at the far
left.

I know that this is the generated HTML because I added a Debug.WriteLine
statement to my designer. In fact, this is the output from that (with some
indentation added).

Now, I've read that the designer host modifies our HTML in several ways, for
instance to display something which would otherwise be invisible. But does
anybody have any idea what might be going on here?

When I copy the generated HTML into the same page, it displays correctly in
the designer! So, what's the designer doing to my generated HTML?

Thanks for any help,
John Saunders
(e-mail address removed)

 

[Mike Clay]

I took your exact same code and the image always shows up on the right at
design time and runtime.
Can you think of anything I might be missing ?

Mike Clay, MCSD
Beta Technical Support


This posting is provided "AS IS" with no warranties, and confers no rights.
© 2002 Microsoft Corporation. All rights reserved.

 

[John Saunders]

Mike and Jim, I found the difference between my simple control, which worked
in the designer, and the more complicated control, which did not work.

First, a little background. The complicated control was a "collapser"
control. It would render a span with an onclick handler which would toggle
another controls's style.display = 'none' and back. It would then render
something visual inside of that span. It would optionally render script to
toggle between two sets of styles on mouseover and mouseout, and could place
the visual content in the upper-right corner of its surrounding div or td.

After finishing it, I decided to extract the positioning functionality into
a "positioner" control, and the mouseover functionality into a "mouser"
control. It's the "positioner" that worked, and the "collapser" which did
not.

I now know that this is because I had added the following code to the
positioner:

protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
if (InDesignMode)
{
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "100%");
writer.RenderBeginTag(HtmlTextWriterTag.Div);
}

:
:

base.Render(writer);

:
:

if (InDesignMode)
{
writer.RenderEndTag();
}
}

I did not have that code in the collapser (I do now!).

So, this actually brings up the original question (what HTML surrounds our
HTML in the designer). Why was the extra <div width=100%> required? Here's a
section of the page they were on:

<DIV style="WIDTH: 100%; HEIGHT: 100px">
<wc:Collapser id="Collapser1" runat="server" OffsetLeft="100px">
<CollapsedTemplate>Collapsed</CollapsedTemplate>
<ExpandedTemplate>Expanded</ExpandedTemplate>
</wc:Collapser><br>
<wcositioner id="Positioner1" runat="server" OffsetLeft="100px">
<ContentTemplate>Expanded</ContentTemplate>
</wcositioner>
</DIV>

So you can see they were both inside of the same <div style="width:100%">
tag, yet without the extra, design-only <div> tag, the positioning doesn't
work. Here's the generated design-time HTML:

Collapser1:

<div style="POSITION:relative;LEFT:100%;width:0px;height:0px;">
<div style="POSITION:relative;LEFT:-100px;">
<span onmouseover="this.style.backgroundColor = '';return true;"
onmouseout="this.style.backgroundColor = '';return true;"
id="_ctl0_Collapser1" designtimesp="17861"
style="WIDTH:auto;CURSOR:hand;"><span>
Expanded
</span><input name="_ctl0:Collapser1:Hidden" id="_ctl0_Collapser1_Hidden"
type="hidden" value="False" /></span>
</div>
</div>

Positioner1:

<div style="width:100%;">
<div style="POSITION:relative;LEFT:100%;width:0px;height:0px;">
<div style="POSITION:relative;LEFT:-100px;">
<span id="_ctl0_Positioner1" designtimesp="17863"
style="WIDTH:auto;"><span>
Expanded
</span></span>
</div>
</div>
</div>

So, if you could research this and get back to me on this newsgroup, I'd be
interested in the answer. In the meantime, thanks for making me learn what
I'd missed. It looks much better in the designer now.

 

[John Saunders]

Microsoft looked into this and found that the behavior is by design. The
designer ignores the width attribute in top-level block elements.

This is addressed in Whidbey.