的jQuery UI的日期選擇器的日曆表寬度溢出UI的日期選擇器

下面的屏幕截圖顯示了一個jQuery UI的日期選擇是，直到最近，正確地顯示：的jQuery UI的日期選擇器的日曆表寬度溢出UI的日期選擇器

Table overflows

有問題的表相關聯的類是ui-datepicker-calendar，它嵌套在ui-datepicker中。我可以在chrome中檢查這個元素，看它有100％的寬度，錯誤地賦予617px的寬度，超過它的父級的217px寬度。

我承認我的CSS經驗不足，但我想我可以通過使用類似下面的代碼片段覆蓋風格：

.ui-datepicker-calendar 
{ 
width: 217px !important; 
}

我見過的堆棧溢出的其他問題這項工作，但我我們無法解決這個特殊的錯誤與上述類似的解決方案。任何想法都受到熱烈歡迎。

編輯：

代碼：

HTML：

<div id="container"> 
    <br /> 
    <!--This div will be dynamically loaded based on the selected tab--> 
    <div id="dataDisplay"> 
    <!-- Section table is loaded here --> 
    </div> 

    <!--This div will be dynamically loaded based on the selected tab--> 
    <div id="mainBody"> 
    <!--Date picker is loaded here --> 
    </div> 
</div>

在CSS：

#sectionTable th, td{ 
    border-collapse:collapse; 
    background-color:#EEE; 
    border:2px solid #39F; 
    min-width:80px; 
    width:97%; 
}

罪魁禍首是在ABO vec的sectionTable的CSS條目。 Mystere Man指出，在另一個div中定義此表上的寬度會導致上述屏幕截圖中的症狀。

對於任何人都會遇到這個問題，請查看以下CSS語法和選擇器資源，以更好地控制CSS文件。

來源

2011-11-07 Erracity

添加分號的寬度的端部：217px重要;！並且也放下了！和重要的 – scrappedcola

請發佈您的代碼 –

更好的語法可能會讓我在一般情況下，但不幸的是，這個錯誤沒有預算。儘管如此，我會更新這個問題來反映這個建議。 – Erracity

更可能的，你有一些風格是壓倒這一點。尋找寬度爲th或td的樣式。您可能會在某種程度上絆倒特定性問題。

來源

2011-11-07 23:14:46

你絕對正確。我有條不紊地瀏覽了我的CSS文件，並逐個註釋了每個條目，這是一種指向th和td的樣式。我不明白爲什麼它會覆蓋它。我希望我早點注意到你的評論，哈哈 – Erracity

在我的情況的罪魁禍首是設置表最小寬度以下代碼：

table { 
border-collapse: collapse; 
width: 100%; 
word-wrap: break-word; 
/*min-width:960px;*/ 
}

來源

2013-08-23 06:13:39 VivMajor

的jQuery UI的日期選擇器的日曆表寬度溢出UI的日期選擇器

回答

相關問題