Question

I’m working on someone else’s code and found something very interesting and hoping someone might know how this is happening.

In the markup file, I place a TextBox control and a DropDownList control, and assigned both of them the CssClass of InputField which changes the background color and other cool stuff.

To avoid any doubts, here are my declarations, copy-paste verbatim from the IDE:

<asp:TextBox runat="server" ID="txtCity" CssClass="InputField" />
<asp:DropDownList runat="server" ID="ddlState" CssClass="InputField" OnInit="ddlState_Init" OnLoad="ddlState_Load" />

When I execute the page, I see the rendered <input> having the correct class name.
But the <select> has a class name dropdown, which just happens to be defined in another .css file in the project, that has different style than mine of course.

Once again, verbatim from the view-source:

<input name="ctl00$ctl00$BodyContentPlaceHolder$ContentPlaceHolder1$txtCity" type="text" id="ctl00_ctl00_BodyContentPlaceHolder_ContentPlaceHolder1_txtCity" class="InputField" />
<select name="ctl00$ctl00$BodyContentPlaceHolder$ContentPlaceHolder1$ddlState" id="ctl00_ctl00_BodyContentPlaceHolder_ContentPlaceHolder1_ddlState" class="dropdown"></select>

To find out how this happens, I stepped into each of the following events:

• Page_Init
• Page_Load
• ddlStates_Init
• ddlStates_Load

and added a watch to ddlStates.CssClass.
To my shock, I found that in all the events, the value of CssClass is already changed to dropdown.

What is changing the class name so early?
Can something I don’t know about override values like this?
Even if something does change values, can it do that before the control’s Init event itself?

FYI: The page class is not inheriting from any page base class – just straight-up System.Web.UI.Page.

FYI: I made sure that I am looking at the correct ddlStates instance by adding a random attribute and verified that it retains that information in all the event step-ins I did.

Thanks.

Answer 1

There are a few things that you need to check before digging too much deeper. The first thing I would look for is a skin/theme file. These files overwrite the appearance of controls to make them feel consistent, but can play havoc when you don’t know about them. To check this just look at your page header or take a look around for any skin files.

Here is a link with some more info on skin/theme files.

From the above source under the section Theme Settings Precedence:

If you set a page’s Theme property,
control settings in the theme and the
page are merged to form the final
settings for the control. If a control
setting is defined in both the control
and the theme, the control settings
from the theme override any page
settings on the control. This strategy
enables the theme to create a
consistent look across pages, even if
controls on the pages already have
individual property settings. For
example, it allows you to apply a
theme to a page you created in an
earlier version of ASP.NET.

Alternatively, you can apply a theme
as a style sheet theme by setting the
page’s StyleSheetTheme property. In
this case, local page settings take
precedence over those defined in the
theme when the setting is defined in
both places. This is the model used by
cascading style sheets. You might
apply a theme as a style sheet theme
if you want to be able to set the
properties of individual controls on
the page while still applying a theme
for an overall look.

If that isn’t the problem then I would suggest changing the name of the drop down temporarily to make sure that it isn’t being played with programmatically. If that fails then begins the long and arduous journey of debugging the hard way.