jQuery UI的日期選擇器實現

Question

我有，我的風格這jQuery的日期選擇器：

http://creeight.se/jqui/

但我有一個很艱難的時間，試圖得到它看的權利在我工作的一個網站。它看起來非常糟糕：

http://creeight.se/stackExample2/

我在做什麼錯在這裏？

Answer 1

在我看來，這主要是因爲你已經改變了字體大小。它繼承了一條規則font-size: 0.875rem;，它來自app.css行6083和6093中的兩條規則。爲我刪除這條規則導致壓光機的尺寸正確。我會更加關注這些規則，因爲它適用於任何表格（我相信這些選擇器分別是table thead tr th, table thead tr td, table tfoot tr th, table tfoot tr td和table tr th, table tr td），並且由於日曆使用的表格正在繼承該樣式（有意或無意）。如果那是你以後的事情，那麼我也會更改日曆的標題，這只是表格上方的一個div，所以不會在表格中選擇該字體大小的規則。

Answer 2

日期選取器是一個表格，並具有單元格大小的最小寬度。因此，它迫使你的內部桌子溢出容器。在.ui-widget-content上彈出width: 100%，這樣可以解決問題，假設您不希望表格是當前div的大小。

Answer 3

只需用樣式表或你的CSS代碼中添加以下的風格。它肯定會刪除overrided性質。現在的日期選擇器的外貌看起來像以前...

.ui-datepicker table 
    { 
     border-width: 0px !important; 
    } 
    .ui-datepicker table th, .ui-datepicker table td 
    { 
     font-size: inherit !important; 
     line-height: inherit !important; 
    }