Ajax Control Toolkit Calendar Control CSS

Question

I am using the AJAX Control Toolkit Popup Calendar Control in a datagrid. When it is in the footer it looks fine. When it is in the edit side of the datagrid it is inheriting the style from the datagrid and looks completely different (i.e. too big).

Is there a way to alter the CSS so that it does not inherit the style from the datagrid?

Answer 1

It uses the style from the grid, because it's in it. If you want to change it's style, change the style of the control. What do you want it to do?

Answer 2

Open the page in firefox. However, first, download the firebug extension. Then, right click on the offending version and go down to inspect element.

Firebug is awesome because it let's you navigate the css of any element. You have two options here:

1) Assign the topmost element an css class and work it that way. or If that's not an option, you can use firebug to get the xpath to the offending element. Xpaths look like body/table/tr/td/table/tr[2]

what you want to do with that in css is

body table tr td table tr { /*css goes here */

}

Option 1 is definitely the better pick. Option 2 is more of a dirty way of getting things done when things like asp.net doesn't let us have the fine grain of control we want.

It would be really awesome if you used a pastebin and posted the link to your rendered page's html.

Answer 3

Here is the pastebin link:

http://pastebin.com/m17d99f8a

I am using a stylesheet for the grid that I got from Matt Berseth's blog located here: http://mattberseth.com/blog/2007/10/a_yui_datatable_styled_gridvie.html

I am using a similar stylesheet for the calendar that I cannot find the link for anymore.