Проблема размера шрифта в средстве выбора данных jQuery

Question

Я только что реализовал jQuery & datapicker для проекта ASP .NET MVC 3 (Razor) и почему-то шрифт datapicker невероятно огромен.

Любая подсказка, как это исправить?

Спасибо!

Answer 1

Все элементы пользовательского интерфейса jQuery могут быть отредактированы вручную в css-файле jQuery UI, или вы можете создать свою собственную пользовательскую тему на сайте пользовательского интерфейса jQuery перед ее загрузкой.Если вы используете Chrome, Safari или Firefox с Firebug, щелкните правой кнопкой мыши на датчике, выберите «осмотреть элемент» и найдите соответствующие строки кода в файле jQuery UI css, которые нужно изменить.Если вы не уверены, где находится файл css вашего jQuery UI, посмотрите Ресурсы в веб-инспекторе, чтобы найти путь к файлу.

Answer 2

.ui-widget {font-size: 62.5%;}

Кажется, чтобы сделать трюк.Это должно быть добавлено к телу, но так больше ничего не нужно менять.https://groups.google.com/forum/?fromgroups=#!topic/jquery-ui/pri7DPcO074

Answer 3

Наконец я нашел решение

1. Найти jquery.ui.datepicker.css

2. Добавить размер шрифта: 10px; для каждой строки .ui-datepicker

3. Изменить на ширину: 11em;

CSS:

.ui-datepicker { padding: .2em .2em 0; display: none; font-size:10px;  width: 11em;}
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; font-size:10px;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; font-size:10px;}
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; font-size:10px;}
.ui-datepicker .ui-datepicker-prev { left:2px; font-size:10px;}
.ui-datepicker .ui-datepicker-next { right:2px; font-size:10px;}
.ui-datepicker .ui-datepicker-prev-hover { left:1px; font-size:10px;}
.ui-datepicker .ui-datepicker-next-hover { right:1px; font-size:10px;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  font-size:10px;}
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; font-size:10px;}
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; font-size:10px;}
.ui-datepicker select.ui-datepicker-month-year {width: 100%; font-size:10px;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%; font-size:10px;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; font-size:10px;}
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  font-size:10px;}
.ui-datepicker td { border: 0; padding: 1px; font-size:10px;}
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; font-size:10px;}
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; font-size:10px;}
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; font-size:10px;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; font-size:10px;}

Answer 4

Тебе нужно будет его "объединить"

http://jqueryui.com/demos/datepicker/#theming

Пример разметки с помощью классов JQuery UI CSS Framework:

 <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
   <a class="ui-datepicker-prev ui-corner-all" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
   <a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
   <div class="ui-datepicker-title">
      <span class="ui-datepicker-month">January</span><span class="ui-datepicker-year">2009</span>
   </div>
</div>
<table class="ui-datepicker-calendar">
   <thead>
   <tr>
      <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
      ...
   </tr>
   </thead>
   <tbody><tr>
      <td class="ui-datepicker-week-end ui-datepicker-other-month "> 1 </td>
      ...
   </tr>
   </tbody>
</table>
<div class="ui-datepicker-buttonpane ui-widget-content">
   <button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button>
   <button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all">Done</button>
</div>

Answer 5

Какой-то случайный CSS должен перезаписывать размер шрифта по умолчанию для этого элемента, или он полностью отсутствует.Просто повторно объявите его или явно определите его как !important, чтобы компенсировать любое другое значение CSS.

Вот CSS, чтобы повторно объявить его:

.ui-datepicker table {
    border-collapse: collapse;
    font-size: 0.9em; /*add !important if it doesn't pick up the size*/
}