I hope this isn't too difficult, obviously you can call HTML tags such as fieldset, label and legends and also textboxes. However how does one call an asp:textbox, i have tried just textbox, asp:textbox, input.textbox but nothing seems to work. This is something that should be really straight forward to do and I can't waste any more time figuring it out.
Thanks.
You can try input[type=text] but that will not work in IE6. Or you can create a class like .asp-textbox and set the CSSClass property of the textbox to asp-textbox which will work across browsers.
Example:
<asp:TextBox ID="TextBox1" runat="server" CssClass="asp-textbox"></asp:TextBox>
/*CSS*/
.asp-textbox{background-color:red;}
Understand that all of the ASP processing is done on the server, before anything gets to the user. When the user's browser is applying stylesheets, it doesn't see any of your ASP code — all it has is the HTML that's been generated by your ASP code.
So what you're trying to find out is what HTML is generated by the textbox tag. The answer is: it depends on the way the textbox is defined. If the TextMode attribute is set to "multiline", then it's rendered in HTML as a textarea element. If it's set to "password", then it's rendered as an input element of type "password". Otherwise, it's an input element of type "text".
Your best bet is probably to assign a class to your textboxes and reference that in your stylesheet.
it's an input (of type text)
it renders as <input type="text" />
The only cross browser way is to add a class to the textbox using CSSClass property and style that using the class. Also you can use the id selector. When using the id selector check for naming container also.
.test { }
<asp:textbox id="txt1" CssClass="test" runat="server" />
Try the following:
.myclass td.col1 input
{
background-color: #D1FFC1;
}
This should work in IE also.
If I've understood you correctly, change the word "call" to "select", it's what CSS does (selects and element for styling). Use the property CssClass on the asp:Text in order to make it easily available to your CSS. Example:
.myClass { color: red; }
Related
I'm using a TextBoxWatermarkExtender on a TextBox, and it's working almost perfectly. The functionality is there: placeholder text that disappears when other text is entered or the TextBox has focus. However, it only seems to be able to load one CSS class, which is the class of the TexBox. I'm working with team code, and elsewhere in the solution is a TextBoxWatermarkExtender that uses a class different from the text box it's attached to, so I know it's possible. What happens is that the TextBoxWatermarkExtender seems to use its default CSS, which I can't have. Relevent code is below, let me know if you need anything else from me.
Code for TextBoxWatermarkExtender:
<asp:RadioButton id="FunctionalityTypeText" GroupName="FunctionalityTypes" runat="server"/>
<asp:TextBox runat="server" id="tbFunctionalities" CssClass="AddTaskForceDetails" MaxLength="240"></asp:TextBox>
<AjaxControlToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2"
runat="server" TargetControlID="tbFunctionalities"
WatermarkText="Custom..." WatermarkCssClass="AddTaskForceDetails"/>
CSS Class that works:
.AddTaskForceDetails
{
width: 425px;
margin: 5px;
}
CSS Class I want to use:
.Watermark
{
width: 425px;
margin: 5px;
color: Gray;
}
Have you tried using inline CSS, just to see what happens?
Well, I'm not sure what was going on, but my TextBoxWatermarkExtender works properly now. The form it was a part of had its own CSS, and the main solution wasn't loading the CSS each time. Loading the form ASPX file in the browser on its own showed the updated CSS, and the next time I ran the solution the CSS persisted. So, Tim, thanks for your suggestion, but I guess it was just luck that solved this problem.
I have a simple website with a master-page. To set properties to elements on a content page (such as Textbox) I use CSS. In designer it works well but when I launch a site a style isn't apllied to controls. The reason is simple. To say, I have a TextBox with id="TextBox1" in content page, it is placed in ContentPlaceHolder1. In CSS file I set properties for object with id #TextBox1. When I launch a site due to master page name mangling it gets an id like ctl00_ContentPlaceHolder1_TextBox1 which is not defined in CSS file included in masterpage.
What is a correct solution of this problem? Hardcoding mangled name doesn't seem to be good.
Use CssClass on the controls, like this: CssClass="myClass", then in your stylesheet instead of this:
#TextBox1 { /* styles */ }
You'd have this:
.myClass { /* styles */ }
It's worth noting that .Net 4 fixes, or allows you to better manage the ID generated in the html, see here for details.
As Nick and SLaks have both said classes are best. You can assign multiple classes in the class property and it will aggregate all the properties from all the classes specified overwrite any of the properties that it shares with earlier classes. The order of the classes definition in the css file sets the order that they get applied.
<style type="text/css">
.genericTextBox
{
background-color: #eee;
color: black;
}
.textbox1
{
background-color: #3ee;
font-size: larger;
}
</style>
<asp:TextBox id="textBox1" CssClass="textbox1 genericTextBox" runat="server"></asp:TextBox>
The order the styles get applied is first genericTextBox, because its the first defined in the style (essentially the order in class gets ignored). It sets the color and the background-color, then the style textbox1 gets applied and it overwrites the background-color and adds font-size to. So in the end you end with the color from generictextbox, the background-color and font-size from textbox1.
EDIT: on the TextBox changed class to CssClass
The simplest solution is to apply your CSS rules using classnames (Which don't get mangled) instead of IDs.
The correct solution is to use the ClientID property, which returns the mangled ID.
For example:
.Something #<%=TextBox1.ClientID %>` {
color: red;
}
However, you can only do that for inline stylesheets.
I have a Skin File that contains:
< asp:TextBox runat="server" CssClass="FixedFont"/>
In the same folder as the Skin file, is the following css file. The Css file contains:
.FixedFont
{
font-family:Courier;
}
Lastly, I have an ASPX page which contains the following control:
<asp:TextBox ID="TextBox1" runat="server">Test</asp:TextBox>
When I view the ASPX page in design mode or run the page, I see that the font-family attribute on the style does effect the textbox control, namely, it is changed to Courier.
However, what I would also like to do is to define a local style on my ASPX page,
.DefaultWidth
{
width: 300px;
}
...and have all of my TextBoxes so that they are the same width.
If I set the CssClass property of TextBox1 to "DefaultWidth"...
<asp:textbox ID="TextBox1" CssClass="DefaultWidth">Hello</asp:TextBox>
...the width of the textbox is changed to 300px but I lose the effect of the skin appling the fix font Courier style.
To get BOTH effects to be applied, the DefaultWidth and the fixed font textbox effect, I have to set the CSSClass property to "DefaultWidth FixedFont", which to me, seems like it defeats the advantage of having the skin in the first place. I guess I expected the effect to be CUMULATIVE, unless I added a style that conflicted with the SKIN, in which case, I expected the local class to be applied over the skin's effect. For example, If I applied a second class, Class2, that also included a font-family specification in addition to other effects, I would expect the font specified in Class2 to override that in the FixedFont style. But that doesn't appear to be what is going on here.
What is the best way to manage such a situation? I imagine very often wanting to have a series of textboxes that all match in width, so I imagine that I will very often want to specify a CssClass on a control in addition to using the effects applied to the control in type in the skin file.
Is the solution NOT to use CSS in the SKIN itself? This seem like it has disadvantages, too, on the side of maintenance.
A secondary problem that I am having is that if I declare a stylesheet with the following class..
.Button
{
background-image: url('/images/button.gif')
}
...and set the CSSClass property of an ASP Button to "Button", I see the image tiled over the button.
However, if I enter the following code in the skin file
it does not find the image.
The images folder is a first-levl folder off of the root of the website.
Any idea why it is not picking up the image. I;'ve tried various other paths, but that is the only one that seems to make sense to me.
By the way, the image is applied in design mode, but it disappears when ity is run.
I don't know if I understood your question but as I'm seeing from here, what you should have to declare this in your "local" style:
textbox.fixedfont { width:200px; }
or simply to every textbox if you are sure about affecting every textbox with the same width, doesn't matter the skin...
textbox { width:200px; }
If this not what you were asking for, please be clearer.
i am using an asp:ImageButton server control; i set the CssClass attribute to my CSS style, in which i defined border:solid 1px red;
.NET automatically renders an inline 'style' attribute as follows:
style="border-width:0px;"
Q1. Can i remove the automatic inline 'style' ? e.g. on the PreRender perhaps inspect the HTML and edit it?
I have tried Attributes.Remove("style") but this does not work (strangely enough does not error either), and i remember reading somewhere i can only remove the attributes that i added manually.
My workaround was to assign BorderWidth=1px property in the aspx page, but what's the point in providing a CssClass property if it's going to be overridden anyway (automatically!) Bug or Feature?
The reason they do this is due to a legacy of HTML where images default to have borders when they have a <a> tag wrapping them. In most situations people don't want these borders which is why ASP.NET does what they do. In order to get around this, you can do the following in your style sheet (assuming you are setting cssclass='redborderbutton'):
.redborderbutton img
{
border:solid 1px red !important;
}
You could use an HTML server control.
<input id="Image1" runat="server" name="ImageButton1" src="images\image.jpg" type="image" />
post render you can remove it with JQuery.
$(document).ready(function() { $("img").removeAttr('style'); }
Replace the "img" with a css style selector -- but keep the quotes.
Actually, I do this a lot in asp.net to "fix" the default rendering of asp.net
ASP is the hackiest set of tags ever. Even if border is "legacy," that can be addressed in CSS.
Trying to CSS it, I can CSS the cells, and the days of the week, and I think the top part that says the month, but the area around the month is silver, and no attempt at cssing it will change it - I tried all the different Css properties (I think) but it always ends up being silver. It appears in the designer as silver too. I can't find a way to change this...ideas?
Just add this in the ASPX of your control:
TitleStyle-BackColor="Transparent"
That should solve the problem.
Unfortunately, this style is actually hard-coded into the Render method of the original ASP.NET Calendar object. You can use Reflector to see this. Yes, it's ridiculous. Use an alternative calendar object, or sublclass the calendar and fix the Render method. Not sure if this is fixed in 3.5...
The rendered HTML for the calendar control will probably contain an inline style definition by default e.g style="background-color: silver;", which will take precedence over CSS declarations unless they have the !important flag.
You could change this in the markup for the calendar control as a quick fix
<asp:Calendar id="cal1" runat="server">
<TitleStyle CssClass="classname" />
</asp:Calendar>
Try using IE Developer toolbar/Firebug + Firefox, and hover over the item that you want to change the color of. See if writing CSS for that items works.
can do what i did which is add a first child in your css. The calendar is still an HTML table. the first row how ever is not the header.
.calendar tr:first-child
{
background-color:lime;
}