Переполнение ширины таблицы календаря jQuery ui-datepicker. - PullRequest
Новая
       12

Переполнение ширины таблицы календаря jQuery ui-datepicker.

3 голосов
/ 08 ноября 2011

На следующем снимке экрана показан инструмент выбора даты jquery ui, который до недавнего времени отображался правильно:

Table overflows

Класс, связанный с проблемной таблицей: ui-datepicker-calendar, вложенный в ui-datepicker. Я могу проверить этот элемент в Chrome и увидеть, что он имеет ширину 100%, что ошибочно присваивает ширину 617 пикселей, что превышает ширину 217 пикселей его родителя.

Я признаю свою неопытность в CSS, но я подумал, что могу переопределить стиль, используя что-то вроде следующего фрагмента: 

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

Я видел эту работу в других вопросах о переполнении стека, но мне не удалось исправить эту конкретную ошибку с помощью подобных решений, описанных выше. Любые идеи с энтузиазмом приветствуются.

Edit:

Код:

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

Виновник в приведенной выше записи CSS для sectionTable. Определение ширины таблицы в другом элементе привело к появлению симптомов на снимке экрана выше, как отмечает Мистер Ман.

Для всех, кто сталкивается с этим вопросом, обратитесь к следующим ресурсам по синтаксису и селекторам CSS, чтобы лучше овладеть вашим CSS-файлом.

Ответы [ 2 ]

1 голос
/ 23 августа 2013

В моем случае виновником был следующий код, который устанавливает минимальную ширину таблицы: 

table {
border-collapse: collapse;
width: 100%;
word-wrap: break-word;
/*min-width:960px;*/
}
1 голос
/ 08 ноября 2011

Скорее всего, у вас есть какой-то стиль, который переопределяет это.ищите стиль th или td с шириной.Вы можете как-то споткнуться о проблему специфичности.

...