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.
source to share
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.
source to share
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 haverunat="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.
source to share
- 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; }
source to share