CODEWITHSUNDEEP
jqueryhtmlcssjquery-uidatepicker
Robin Cox
Robin Cox

Reputation: 1490

jQuery UI datepicker implementation

I have this jQuery datepicker that I have styled:

http://creeight.se/jqui/

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?

Upvotes: 0

Views: 177

Answers (3)

Soundar
Soundar

Reputation: 2589

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;
    }

Upvotes: 1

OJay
OJay

Reputation: 4921

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.

Upvotes: 1

tr3online
tr3online

Reputation: 1429

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.

Upvotes: 2

Related Questions