Clever Geek Handbook

CSS styling not working with ID

I am using asp.net/C#

for my project. I currently have a page default.aspx

and a home page. There default.aspx

are many controls on the page , and for each control I have defined class

and id

. The problem I am running into is that when I apply style

to a specific control with using class

, the styles are reflected correctly, and when I do this using the ID of the control, the style is not reflected. I fixed the problem, but I don't know how to solve it. For example, I have a textbox

s id="txtCustNo"

when I apply a style like

#txtCustNo{border:1px solid red}

it doesn't reflect, when i apply style like #ctl00_ContentPlaceHolder1_txtCustNo

, it shows changes, however id txtCustNo

.. can someone point me where i am going wrong. Thank.

+3


source to share


3 answers


The ID on server controls is automatically generated and does not match the generated ID on the client side.

You can find the generated ID with this: <% # txtCustNo.ClientID%>

ASP.NET 4 supports a new ClientIDMode property in the base Control class. The ClientIDMode property specifies how controls should generate client ID values ​​when they are rendered. The ClientIDMode property supports four possible values:

  • AutoID - displays output as in .NET 3.5 (auto-generated ids which will still handle prefixes like ctrl00 for compatibility)
  • Predictable (default) - Truncates any id string "ctl00" if the list / container control concatenates child elements (example: id = "ParentControl_ChildControl")
  • Static hands over complete naming control for the developer - whatever they set as the ID of the control is what is displayed (example: id = "JustMyId")
  • Inherit - instructs the control to transition to the naming behavior mode in the parent container


When using ASP.Net prior to 4.0, you have to live with auto-generated ids.

For more information on 4.0 features see this link.

http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net- 4-0-series.aspx

+4


source


The client ID is not equal to the ID

property of the control runat="server"

. To get the id on the client, you can use the property ClientID

.

Newer versions of ASP.NET (starting in version 4) have a property to control the generation. ClientIDMode

So, to solve your problem, you can set ClientIDMode

in ClientIDMode.Static

or somehow access the property ClientID

from the code behind and put that value in your CSS definition.



Alternatively, you can also:

  • Place the textbox in some container control (like a div

    ) that doesn't have runat="server"

    , and put the id in that container control, changing your CSS to eg.#txtContainer input{border:1px solid red}

  • Use the CssClass

    property of     your textbox and use that class in your CSS file instead of the id.
+3


source


  • If you are using Visual Studio 2010, you can set the control clientID mode to ClientIDMode="Static"

  • I would advise you to use CSS along with the skin file

  • Also, if you are trying to customize a control with CSS, just wrap a div around it and then apply styles like this (they apply to all inputs inside that div)

    input divId {

              width: 100px;
     }

    ASP.NET Themes and Skins Themes and Skins

+1


source






More articles:


All Articles