Control's CssClass field changes on Init

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.