Welcome Guest Search | Active Topics | Sign In | Register

Adjust DatePicker margin size? Options
Brian300
Posted: Saturday, August 28, 2010 2:23:34 PM
Rank: Member
Groups: Member

Joined: 3/13/2010
Posts: 13
Simple question, is there any way to adjust the margin around the date picker control? Looks like it is about 10px right now and when I'm using several of these on rows, it makes the rows unnecessarily tall. Can't find a way to adjust this. Can I adjust it using my skin or css?
eo_support
Posted: Saturday, August 28, 2010 3:48:57 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

The DatePicker does not apply any margin by default. So you may want to check your CSS styles.

Thanks!
Brian300
Posted: Saturday, August 28, 2010 5:15:06 PM
Rank: Member
Groups: Member

Joined: 3/13/2010
Posts: 13
Found it! The DatePicker puts the text box and picker image in a table (which was inheriting from my standard style for tables), so I added CssBlock="td {margin:0px;padding:0px;}" and the problem is solved. Thanks for the speedy response!
Brian300
Posted: Monday, August 30, 2010 1:36:09 AM
Rank: Member
Groups: Member

Joined: 3/13/2010
Posts: 13
I said "solved" too quickly. CssBlock merely inserts a block of CSS into the rendered page, which apparently overrides the linked style sheets in the head of the page. So all this did was override the default style I would like to have applied too all table cells on the page. I thought it was applying that CSS only to the datepicker. How would I go about controlling the padding/margin on the table and table cells that are used to generate the datepicker control (and calendar picker image)?
eo_support
Posted: Monday, August 30, 2010 9:25:15 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

There are various ways to do it, but it all comes down to limiting the scope of a CSS rule. Detail about this is very much of a CSS topic so it is beyond the scope of our support. The following link should give you some basic ideas:

http://www.w3.org/TR/CSS2/selector.html

Ultimately you may want to remove your global table styles because you never know if you are going to run into something else that unintentionally picked up your style.

Thanks!
Brian300
Posted: Monday, August 30, 2010 12:02:36 PM
Rank: Member
Groups: Member

Joined: 3/13/2010
Posts: 13
Ahh! OK, you COULD just come out and admit that your control should have this ability, but that is OK. =) I will find a work around, I know what css selectors are and use them all over the page. Typically, you define what your DEFAULT values should be when no selector is supplied, and then you modify the rule with a special selector style definition. Your controls do such a great job of letting you control every little tiny detail of it's appearance, I think it is just an oversight that you don't allow me to modify one of the most basic things, which is the padding and margin around the entire control itself.

There are cases where CSS doesn't inherit like you expect it to, and you are forced to add a class selector to each element. I have LARGE gridviews on my pages, and adding a class selector to each td would greatly increase the size of my page. I'll figure something out, but for future feature requests, I think this would be a good (and proper) addition (to allow the user to specify the style of the wrapping table for a date picker).

Thanks for your timely responses!!!
eo_support
Posted: Monday, August 30, 2010 12:26:14 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

No. Actually we do not believe the control should allow you to customize every possible CSS aspect on the control itself.

There is a fine balance on how many options the control should provide and the size of the control. For example, we do not intend to provide 100 options on a control where most people will only use less than 10. The padding and margin are not a "basic" things here because the target of the padding (or whatever style you have) is a td element. It's not a table element. It's not a root element for the DatePicker control. DatePicker control has no idea that you have a rule on TD and there are many TDs inside the DatePicker. We could expose a TDStyle property for you but tomorrow you may come back to ask for a DivStyle; or you might just want two different TDStyle one for the textbox and one for the drop down. It makes absolutely no sense for us to do that.

In fact usually we will not address an issue on the control level if it can be addressed on the CSS level because the CSS is much more versatile. Your issue can be easily addressed with CSS so there is no reason to do anything special on the control.

Thanks!

Brian300
Posted: Monday, August 30, 2010 12:28:22 PM
Rank: Member
Groups: Member

Joined: 3/13/2010
Posts: 13
I was able to get this fixed by adding a div with a selector around the date picker. Sometimes CSS doesn't 'cascade' like you expect it to, but forcing td to inherit padding made it so that I could achieve desired results without adding a class selector to every td on the page, so this will work out just fine. Again, thanks for your quick responses!
eo_support
Posted: Monday, August 30, 2010 12:32:35 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Brian300 wrote:
I was able to get this fixed by adding a div with a selector around the date picker.


You are welcome. That's probably the cleanest solution for your scenario. Glad that you got it working!
Brian300
Posted: Monday, August 30, 2010 12:39:19 PM
Rank: Member
Groups: Member

Joined: 3/13/2010
Posts: 13
I'm not trying to get into an argument here, or start a fight. I'm a novice user of your control and I was trying to solve a problem I was having with it. I'm not sure what you are talking about exposing a TD style or a Div style (where did div come from?). I'm just noticing that you wrap your control in a table so the picker can be next to the calendar image. I didn't see a way to style that table. You have a bazillion different options in there to style that control, and I have even skinned it and used CssClass for a lot of the control. It is working just great, and I am amazed and the level of control I have over it! I just didn't see a way to style the wrapping table (that YOU use to create your control), I'm still not sure why you are talking about me asking for a DivStyle or something like that.

No matter, I think I have it styled with an acceptable solution and am happy! Thanks again!
eo_support
Posted: Monday, August 30, 2010 1:04:04 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

I believe you can set the style on the table. Because the table is the root element of the DatePicker, so you would just set the DatePicker's CssClass property and it will be automatically converted to a "class" attribute to the table. CssClass is not a proeprty implemented by the DatePicker control, it comes from the standard ASP.NET WebControl class; It happens to work because the table element is the root element of the DatePicker.

However your rule is not the table rule, your rule is the td rule. These are two different things. While you can apply styles on the root table with CssClass property, we will not expose additionally options for you to specifically customize each td element just because you have a global TD rule.

We mentioned about div because you situation is caused by a global td style in your CSS and that can be anything on any element. What if tomorrow another user has a global DIV style in their CSS file? The DatePicker uses DIV as well. Shall the DatePicker also add some other properties so that user can customize the DIV element style in the DatePicker? What if the day after tomorrow another user has a global SPAN (which the DatePicker also uses) style? The point is we will almost never add special support for a particular CSS configuration interfering with any of our control because there can be potentially endless scenarios. If the CSS configuration is causing problem for you, modifying your CSS or changing the way you apply your CSS is almost always the cleanest way to fix the problem, as you have already discovered.

I hope this clarifies our position. This issue is now closed.

Thanks


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.