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.
Related
I've been stuck on this for 3 days now.
I have two pages that basically share some code for a search feature on my website, here's my code
The CSS
#btnSearch {
display: block;
color: #ffffff;
width: 100px;
height: 27px;
border: 0;
padding: 0;
background: transparent url("Images/btnSearch2.png");
}
When I'd gotten the one page working, I copied that code to the page where it doesn't work, but it hasn't made any difference, here's the HTML (don't worry about the inline css, that's just for convenience while I'm working on it...)
EDIT1:
All other classes work correctly as they (along with the css above) come from a stylesheet at <webroot>/App_Themes/Default... The images go in a subdirectory of this location.
I don't see why this code works on 1 page and not the other when all the other CSS classes work on both pages...
Have you tried the absolute image path and see if it works that way?
Maybe it´s a Browser problem: Try to open the file that doesn´t work in another browser.
Maybe you have a tag named the same way #btnSearch in the pages where the styles don´t apply.
Is the path to the background image correct for the page where the code doesn't work? Or even the path to the CSS file?
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; }
I have an ASP.NET application with a drop down list.
How to disable a drop down list with CSS, so it appears grayed out? Is it possible to do this with only CSS ?
I used pointer-events: none; and it works ok. You can even set opacity to gray it out. Create a class and add/remove it as you wish. Something like:
.disabled {
opacity: 0.6;
pointer-events: none;
}
Note that the user might still be able to use keyboard and tab to it!!
David is right. Another option (still non-CSS) is too loop through all the options and disable each one. They will turn the gray color you want and be disabled. Using a library like jQuery makes this a snap.
It seems to me that this is almost the same question... That answer suggests using something similar to:
<asp:DropDownList ID="DropDownList1" runat="server" Enabled="False">
</asp:DropDownList>
CSS (Cascading Style Sheet) is made for changing style of elements, not functionality. You can do it using HTML: Enabled="False" for ASP.NET tags or by adding empty disabled attribute without value to simple HTML tags.
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.
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;
}