Applying CSS to a textbox within a formview control

Question

I am trying to apply css styles to textboxes within a formview. What is the correct way to do this as the form is not applying the styles below is part of the code where i was trying to apply the code

<asp:FormView ID="FormView1" runat="server" BackColor="White" 
            BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" 
            DataKeyNames="pappid" DataSourceID="applicantsbypappid" GridLines="Both"> 
<ItemTemplate>
               <%-- pappid:--%>
            <asp:Label ID="pappidLabel" runat="server" Text='<%# Eval("pappid") %>' />
            <br />

             <asp:Label ID="lblapplicantname" runat="server" CssClass="labels" Text="Applicant's Name:">
    </asp:Label>
    <asp:TextBox ID="txtapplicantfname"  runat="server" Text='<%# Bind("pappfname") %>'></asp:TextBox>
    <asp:TextBox ID="txtapplicantmname"  runat="server" Text='<%# Bind("pappmname") %>'></asp:TextBox>
    <asp:TextBox ID="txtapplicantlname"  runat="server" Text='<%# Bind("papplname") %>'></asp:TextBox>

css code

#txtapplicantfname
{
    width: 70px;
    border-bottom: 1px solid #0954A5;
    border-left-style: none;
    border-left-color: inherit;
    border-left-width: 0;
    border-right-style: none;
    border-right-color: inherit;
    border-right-width: 0;
    border-top-style: none;
    border-top-color: inherit;
    border-top-width: 0;
    font-size: 10px;
 }

Is there any special requirement by doing so ? Can I tell you other way around ? — Muhammad Akhtar
– Muhammad Akhtar, Commented May 29, 2011 at 1:23
There is no special requirement to doing it any certain way. Basically if i could find a way to add this command Text='<%# Bind("pappfname") %>' to individual textboxes all my css issues would go away. I am using the formview in order to bind the objectdatasource is there another way i could write code to bind the objectdatasource to the whole form? Hope that makes sense thanks for your help — Tim
– Tim, Commented May 30, 2011 at 1:31

Mykola · Accepted Answer · 2016-02-16 20:43:42Z

2

I would suggest you to assign the css directly, as the server side control ID renders in complete hierarchy with concatenation. Like in your case, there will be a Content Place Holder and a Textbox (ctl00_ContentPlaceHolder_txtapplicantfname). If there will be any more panels; Tab Panel(ctl00_ContentPlaceHolder_TabPanelID_txtapplicantfname), etc involve hierarchy will be disturbed.

You can do it like...

<asp:TextBox ID="txtapplicantfname" CssClass="txtapplicantfname"  runat="server" Text='<%# Bind("pappfname") %>'></asp:TextBox>


.txtapplicantfname
{
width: 70px;
border-bottom: 1px solid #0954A5;
border-left-style: none;
border-left-color: inherit;
border-left-width: 0;
border-right-style: none;
border-right-color: inherit;
border-right-width: 0;
border-top-style: none;
border-top-color: inherit;
border-top-width: 0;
font-size: 10px;
}

edited Feb 16, 2016 at 20:43

Mykola

3,4136 gold badges27 silver badges40 bronze badges

answered May 29, 2011 at 1:36

Muhammad Akhtar

52.2k37 gold badges142 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tim Over a year ago

I am sorry that will not work for me as I have applied a standard textbox class to all textboxes. What if i was to put a table within the form would it see my css styles then?

Muhammad Akhtar Over a year ago

But you want to assign specific class to TxtApplicationFname, and it should work if you assign specific class. that is answer.

Tim Over a year ago

Thanks I am re designing the form to use all class I was just under the impression you only use classes for css when you are going to have multiple controls with the same styles. Thanks for all your help

SylvainC · Accepted Answer · 2011-05-29 01:23:28Z

0

You know that when you use ASP.NET server controls, they are converted to HTML tags. The TextBox control will be rendered in HTML as an "input" tag. In the process however, ASP.NET does not give the same ID to the HTML tag. It will not be "txtapplicantfname", it will be something like "ctl00_ContentPlaceHolder_txtapplicantfname".

CSS styles apply to the HTML tags, not the ASP.NET code. So in the CSS stylesheet, if you refer to a control ID, you need to refer to the ID of the rendered HTML code. Your style should be:

#ctl00_ContentPlaceHolder_txtapplicantfname
{
(...)

Just display your page in a navigator (or execute in debug mode) and check the source to get the real IDs for the HTML tags.

answered May 29, 2011 at 1:23

SylvainC

465 bronze badges

2 Comments

codeandcloud Over a year ago

-1 sorry. very wrong approach. especially when ASP.NET has these ClientIDMode and all. CssClass is there for a reason

Tim Over a year ago

Sorry i tried to run the form in debug mode however i can not find where it shows the full path to the id of the controls.

Nitin S · Accepted Answer · 2011-05-31 09:01:25Z

0

Additionally, Within asp.net form you can use

 #<%= txtapplicantfname.ClientID%>
 {
      (...)
 }

answered May 31, 2011 at 9:01

Nitin S

7,71110 gold badges65 silver badges105 bronze badges

Collectives™ on Stack Overflow

Applying CSS to a textbox within a formview control

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related