I have this jQuery datepicker that I have styled:
But I have a really hard time trying to get it to look right on a site I'm working on. It looks really bad:
http://creeight.se/stackExample2/
What am I doing wrong here?
Add a comment
|
3 Answers
The date picker is a table and has a minimum width of cell size. As such, it is forcing your inner table to overflow the container. Pop at width: 100% on your .ui-widget-content and that'll fix the problem assuming you don't want the table the size of the current div.
Comments
In my opinion, it is primarily because you have changed the font size. It is inheriting a rule of font-size: 0.875rem; which is coming from two rules in app.css line 6083 and 6093. Removing this rule for me caused the calender to size correctly. I would be more targeted with those rules as it will apply to any table (I do believe the selectors are table thead tr th, table thead tr td, table tfoot tr th, table tfoot tr td and table tr th, table tr td respectively) and because the calendar uses a table it is inheriting that style (Intentionally or not). If that was what you are after, then I would also change the title of the calender too, which is just a div above the table, so not picking up that font-size rule as its not in the table.
Comments
Just add the below styles with your style sheet or inside your css code.. It will definitely removes the overrided properties .. Now the date picker's physical appearance looks like the previous...
.ui-datepicker table
{
border-width: 0px !important;
}
.ui-datepicker table th, .ui-datepicker table td
{
font-size: inherit !important;
line-height: inherit !important;
}
Comments
