CSS doesn't work on dynamicly added user controls

[Henke]

Hi!

I add some web user controls dynamicly with:

myPanel.Controls.Add(Page.LoadControl("MyDynamiclyAddedPage.ascx"));
the style of the controls on the user control is set from a css-class, by
setting the CssClass-property, but they doesn't display properly.

If the user control is added at design time everything looks correct.

Any ideas?
Thanks!
/Henke

 

[Munsifali Rashid]

When you add a user control, the control ID may change. If you're using
this ID in any of the styling, then the style will no longer work correctly.

E.g.

<style>
#MyDiv .foo
{
color: #ff2200;
}
</style>

<div id="MyDiv" runat="server" CssClass="foo">This is some text</div>

This will work correctly if added directly at design time. However, if you
put this into a user control, the ID will be changed to something like
"MyUserControl_MyDiv". This will cause the style to stop working, as the
style will only be applied to tags with the ID of "MyDiv".

This might not be your case, but if you can post the style(s) not working,
and a snippet of your code, we can check

Hope this helps,

Mun

 

[Henke]

Hi, and thaks for your quick answer.
I should say I'm not that used to work with css-files but this is how it
looks:
In my css-file:
..Label
{
font-size: 10pt;
font-family: 'Arial Narrow';
}

And than I just set the CssClass property on all my labels on the user
control to Label.

This is how one label looks in "HTML-file" at design time:
<asp:label id="Label8" style="Z-INDEX: 104; LEFT: 8px; POSITION: absolute;
TOP: 24px" runat="server" CssClass="Label">Name *</asp:label>

An this is how the source looks when the page is displayed in a browser:
<span id="dynamicControlHost__ctl0_Label8" class="Label" style="Z-INDEX:
104; LEFT: 8px; POSITION: absolute; TOP: 24px">Name *</span>

/Henke

 

[Munsifali Rashid]

There doesn't appear to be anything obviously wrong with the code below.
I'm not sure that 'Arial Narrow' should be in single quotes though - it
should work fine without. However, that wouldn't explain why it works
correctly at design time, but not as a user control.

When you said it doesn't display correctly, what exactly happens? Is the
font incorrect (eg. it appears too big, or is the wrong typeface), or is the
style tag being ignored (eg. the user control is not obeying the absolute
positioning and is not being displayed on the correct part of the page) ?

Regards,

Mun

 

[Henke]

Both font-size and font-family is incorrect. But I noticed something else,
some user controls get correctly displayed the first time they ar shown, but
the second time the gets displayed the fonts are wrong.
Does it matter if I put my user controls on panels or in place holders?
Now I have a panel on which I loads new user controls depending on some menu
selections.

/Henke

 

[Munsifali Rashid]

It shouldn't matter whether your controls are in panels or placeholders.
I've used both in the past, with CSS styling without any problems. Netscape
does some weird things with stylesheets sometimes, but I'm assuming that
you're using Internet Explorer, which shouldn't be a problem.

Mun