Class not working for textbox.

[tshad]

I cannot seem to get the asp:textbox to use classes. Style works fine. I
am trying to set the textbox to act like a label in some instance so it
doesn't have a border, readonly and the background is grey.

I have a class set as:

..table2Label{
border-style:none;
background-color:#F6F6F6;
}

I have a textbox:

<asp:textbox id="applicantID" class="table2label"
TextMode="SingleLine" Columns="32" runat="server" />

This doesn't seem to work.

If I do this:

<asp:textbox id="applicantID" Style=" border-style:none;
background-color:#F6F6F6;" TextMode="SingleLine" Columns="32" runat="server"
/>

This works perfectly.

Why doesn't the class?

Thanks,

Tom.

 

[Carl Prothman [MVP]]

I cannot seem to get the asp:textbox to use classes. Style works
fine. I am trying to set the textbox to act like a label in some
instance so it doesn't have a border, readonly and the background is
grey.

I have a class set as:

.table2Label{
border-style:none;
background-color:#F6F6F6;
}
I have a textbox:
<asp:textbox id="applicantID" class="table2label"
TextMode="SingleLine" Columns="32" runat="server" />

This doesn't seem to work.

Tom,
You are setting the wrong atttribute.
For Web Server controls, use CSSClass property.

 

[tshad]

Tom,
You are setting the wrong atttribute.
For Web Server controls, use CSSClass property.

I did try that also and it still doesn't seem to work - I am using Mozilla.

I also changed the name to .text2label as I misnamed it.

<asp:textbox id="applicantID" CSSClass="textbox2Label"
TextMode="SingleLine" Columns="32" runat="server" />

and

..textbox2Label{
border-style:none;
background-color:#F6F6F6;
}

I also tried this at runtime and it doesn't work there either.

Tom.

 

[Karl Seguin]

There's nothing wrong with what you are doing. you can either use class or
CssClass (class isn't a recognize proprety so it simply gets rendered as-is
as an html attribute). Probably better to use cssClass so you can program
against it easier..but that isn't your issue.

I've experienced extremely finiky behaviour from firefox with respect to
applying styles to textboxes...simple things like extra spaces causing
problems...I imagine you are running into the same problem (and I imagine it
isn't with firefox but something we are doing). Simply try rewriting the
style as:
..table2Label{border-style:none;background-color:#F6F6F6;}

and make sure nothing is indented ...

Lemme know.

Karl

 

[tshad]

There's nothing wrong with what you are doing. you can either use class
or
CssClass (class isn't a recognize proprety so it simply gets rendered
as-is
as an html attribute). Probably better to use cssClass so you can program
against it easier..but that isn't your issue.

I've experienced extremely finiky behaviour from firefox with respect to
applying styles to textboxes...simple things like extra spaces causing
problems...I imagine you are running into the same problem (and I imagine
it
isn't with firefox but something we are doing). Simply try rewriting
the
style as:
.table2Label{border-style:none;background-color:#F6F6F6;}

and make sure nothing is indented ...

Nope.

I also tried IE and Netscape and they don't work either.

Does this statement look right?

<asp:textbox id="applicantID" Class="textbox2Label"
TextMode="SingleLine" Columns="32" runat="server" />

Here is the CSS file from the beginning to just after the text2label class.
***********************************************
body {
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
th {
background-color:#2FABAD;
color:white;
text-decoration: none;
border-style:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
..dataGrid {
background-color:#2FABAD;
color:white;
border-style:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

..dataGrid a:visited {color:#FFFFFF;font-weight:bold;
}
..dataGrid a:link {color:#FFFFFF;font-weight:bold;
}
..dataGrid a:active {color:#FFFFFF;font-weight:bold;
}

..table2Label{border-style:none;background-color:#F6F6F6;}

..console{
background-color:#2FABAD;
color:white;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12;
}
*******************************************************

Here it is rendered in IE (looks right)

*********************************************************************
<tr valign="baseline">
<td width="160" align="right" nowrap class="BodyText">Applicant
ID:</td>
<td >
<input name="applicantID" type="text" value="1000" size="32"
readonly="readonly" id="applicantID" Class="textbox2Label" />
</td>
</tr>
****************************************************************************

Here it is in Mozilla (also appears correct):
***************************************************************************
<tr valign="baseline">
<td width="160" align="right" nowrap class="BodyText">Applicant
ID:</td>
<td >
<input name="applicantID" type="text" value="1000" size="32"
readonly="readonly" id="applicantID" Class="textbox2Label" />
</td>
</tr>
****************************************************************************

This is what drives me crazy. I spend hours or days trying to get something
to work that should work. I have spent the whole day on this and can't seem
to get it to work.

I think I am just going to create an identical page and change all the
textboxes to labels as I can't spend too much more time on this.

Thanks,

Tom

 

[MWells]

Not sure if this was intentional, but in your code you have;

<asp:textbox id="applicantID" Class="textbox2Label"
TextMode="SingleLine" Columns="32" runat="server" />

And in your CSS you have;

..table2Label{border-style:none;background-color:#F6F6F6;}

The class names don't match, if I'm reading in the correct place.

Also double-check to make certain the CSS file is actually referenced in
your page, that would bite you as well.

Do a view-source on the resulting code to see how the textbox is rendering,
to make certain everything matches up as you intended.

All else looks spot-on.

/// M

 

[tshad]

Not sure if this was intentional, but in your code you have;

<asp:textbox id="applicantID" Class="textbox2Label"
TextMode="SingleLine" Columns="32" runat="server" />

And in your CSS you have;

.table2Label{border-style:none;background-color:#F6F6F6;}

You're right. I just changed the names to better match what I was trying to
do and forgot to rename it in the css page. After I did, it didn't help.

The class names don't match, if I'm reading in the correct place.

Also double-check to make certain the CSS file is actually referenced in
your page, that would bite you as well.

I did. If I comment out the line "<link href="staffing.css"
rel="stylesheet" type="text/css">", none of my styles work - so I know it is
being loaded.

Thanks,

Tom

 

[tshad]

OK.

I seem to have found the problem. I was able to see it when I viewed the
source and tried to run it as a straight HTM file.

I had my link to the css file in there twice. This doesn't cause a problem
in the htm file which worked fine with the text2label class.

But for some reason, having the 2 links in the aspx file, caused it a
problem.

The reason it was in there twice, was because I had taken all the headers
and footers and put them in include files so all my pages would be the same.
I inadvertantly put the link in the include file and forgot to delete it
from my page (so they were there twice). This shouldn't have caused a
problem (as they obviously are identical and worked fine that way in the htm
file) - but it did.

The problem is now is what if you use 2 different css files - will that
cause a problem in asp.net.

Tom

 

[MWells]

That's an interesting scenario; but the behavior shouldn't be any different
under .NET.

Remember that ASP.NET's primary function is to render HTML from nice, neat,
manageable components. At the end of the day, it's all about the HTML that
arrives at the browser.

ASP.NET really knows nothing about CSS files; it's just a <LINK> tag in your
header. Only things with a runat=server attribute are important to ASP.NET,
so all of the pure HTML parts of your page (including your <LINK> tags)
should pass through ASP.NET unscathed.

It sounds like your problem is solved, but if you're pursuing this
academically, here's an interesting test;

Take your ASP.NET page, execute it, view the source and save it as
TEST1.HTM. Then duplicate that HTM file and rename it TEST1.ASPX. Since
it's already rendered, there's no code to execute, and nothing for ASP.NET
to do... but the request will still pass through the .NET infrastructure.

Afaik, accessing both TEST1 files from your browser should give identical
results.