WebControl design mode behavior

[JW]

In design mode:

When you drop two Labels, HyperLinks, Buttons, etc onto a form they
are shown as side-by-side (just like they are when the actual page is
rendered).

When you drop two Tables, Calendars, Panels, etc onto a form they are
shown as stacked (just like they are when the actual page is
rendered).

When you drop two custom WebControls onto a form, they are shown as
side-by-side. How do you get a custom WebControl to show as stacked
while in design mode? In other words, if you drop a WebControl onto a
form, how do you get the next control dropped onto the form to show up
below the WebControl instead of next to it?

 

[Ben Schwehn]

When you drop two Labels, HyperLinks, Buttons, etc onto a form they
are shown as side-by-side (just like they are when the actual page is
rendered).

yes, just as in HTML

When you drop two Tables, Calendars, Panels, etc onto a form they are
shown as stacked (just like they are when the actual page is
rendered).

Because they are resp. consist of tables, panels probably uses the div tag
or something -> linebreak in html

When you drop two custom WebControls onto a form, they are shown as
side-by-side.

Depends on the custom control...

How do you get a custom WebControl to show as stacked
while in design mode? In other words, if you drop a WebControl onto a
form, how do you get the next control dropped onto the form to show up
below the WebControl instead of next to it?

You could
- put a <br> inbetween?
- add a <br> to the custom control, that way you don't have to edit the
webform you're working with direktly


Hope that helps
Ben

 

[James Williams]

Thanks, Ben, but adding a <br> doesn't change the way the WebControl
displays at DESIGN time. Adding a <br> makes the WebControl a tad longer,
but when you drop another control next to it, it still shows up side-by-side
at DESIGN time. I know at runtime it works, but what I'm going for is DESIGN
time behavior.

 

[John Saunders]

In design mode:

When you drop two Labels, HyperLinks, Buttons, etc onto a form they
are shown as side-by-side (just like they are when the actual page is
rendered).

When you drop two Tables, Calendars, Panels, etc onto a form they are
shown as stacked (just like they are when the actual page is
rendered).

When you drop two custom WebControls onto a form, they are shown as
side-by-side. How do you get a custom WebControl to show as stacked
while in design mode? In other words, if you drop a WebControl onto a
form, how do you get the next control dropped onto the form to show up
below the WebControl instead of next to it?

Do the WebControls render block tags like div or table, or inline tags like
span?

 

[Ben Schwehn]

Thanks, Ben, but adding a <br> doesn't change the way the WebControl
displays at DESIGN time.

hello James,

you're right. It worked for me only because my control is quite big (both
at design and runtime) so the VS designer puts the next control below the
first control.
I only recently implemented the designer for the server control i'm
working at atm and just after that the IDE started stacking my controls.
this i wrongly attributed to the fact that my designer rendered a table at
design time, as I said, it was just the size.

Well, John Saunders had a kind of similiar (?) problem in thread starting
with message (e-mail address removed) he used this code,
perhaps that works...? don't want to boot windows just to try it but
here's the code for you to have a look:


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

 

[John Saunders]

hello James,

you're right. It worked for me only because my control is quite big (both
at design and runtime) so the VS designer puts the next control below the
first control.
I only recently implemented the designer for the server control i'm
working at atm and just after that the IDE started stacking my controls.
this i wrongly attributed to the fact that my designer rendered a table at
design time, as I said, it was just the size.

Well, John Saunders had a kind of similiar (?) problem in thread starting
with message (e-mail address removed) he used this code,
perhaps that works...? don't want to boot windows just to try it but
here's the code for you to have a look:


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

I think Ben is correct. In the thread he referenced, Microsoft determined
that the problem was that the designer is ignoring the outermost block
element. In my case, the problem was that my outermost div was supplying the
width=100%, so I had to add a new one at design time. It makes sense that if
the outermost element is a block element but the next inner element is an
inline element, and if the designer will ignore the block element, that
you'll be left with inline behavior.

Adding an outer <div> or <div style="WIDTH:100%"> should solve your problem
if it is the same problem I had.

 

[James Williams]

Thanks Ben. Previously, I had set the Width to 100% in the ControlDesigner
GetDesignTimeHtml method and it worked, but I didn't like how it showed up
in design time. But, I guess it is the prevailing way to get this design
time behavior, so I guess I'll go that route again. Thanks.

 

[James Williams]

It is inheriting the WebControl class, so it renders SPAN tags at beginning
and end. I am able to get the behavior by adding a Width of 100% to the
GetDesignTimeHtml method, but I was looking for a more natural way of doing
this. Meaning, when you drop a Panel onto a page, it doesn't appear as if it
were at 100% width, but it still does not let you drop another control next
to it (which is how it should behave). If I set my Width to 100% at design
time, it doesn't allow me to drop another control next to it, which is what
I want, but I didn't want the WebControl to appear as if it were 100% width.
Does that make sense?

 

[James Williams]

The Panel example was bad (because it does appear 100%), but if you drop a
Table, it doesn't appear 100% width, but you cannot drop another control
next to it either.