Переопределение свойства CSS JQuery UI?

Question

Я пытаюсь переопределить свойство CSS JQuery для datepicker, но это не проявляет никакого эффекта. Я хочу увеличить ширину месяца combobox внутри datepicker.

Я переопределение свойства JQuery UI CSS, делая

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { 
width: 50% !important; 
} 

По умолчанию это 49%. Кажется, это не работает. Пожалуйста, направляйте.

Answer 1

Есть несколько вещей, которые могут быть. Ваш селектор может быть неправильным или недостаточно конкретным. Если вы скопировали точный селектор, дважды проверьте, что вы скопировали точный селектор, который они использовали.

Порядок ваших таблиц стилей может быть неправильным. Убедитесь, что файлы jquery.ui.css и темы загружаются до вас.

Это может быть что-то другое. Я нахожу лучший способ отлаживать такие вещи, как на панели стилей в инструментах разработчика Chrome. Перейдите на вкладку, которая произведет расчет; выбрать ширину; и щелкните там, где сказано width, это приведет вас к селектору, который создал это правило. Снимите флажок с правила ширины, а затем посмотрите, какое правило width применяется. В конце концов вы снимете все применяемые правила ширины или узнаете, какой из них переопределяет ваш.

Вы также можете обнаружить что-то еще, например: ваше правило не загружается вообще. Возможно, вы используете кешированную версию своей таблицы стилей и т. Д.

Это правило наверняка передислоцировано - есть где-то логическая ошибка или опечатка, и вам просто нужно ее найти.

Answer 2

Вы можете использовать:

#ui-datepicker-div { 
     width: 50%; !important; 
    } 

или:

.ui-datepicker.ui-widget { 
     width: 50%; !important; 
    } 

Или, если быть более точным, в JQuery готовы вы можете сделать:

$(function() { 
 
    $("#datepicker").datepicker().on('focus', function(e) { 
 
    $("#datepicker").datepicker('widget').width('90%'); 
 
    }); 
 
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 
<p>Date: <input type="text" id="datepicker"></p>

Использование просто в таблицу стилей:

$(function() { 
 
    $('#zzz').datepicker(); 
 
    $("#datepicker").datepicker(); 
 
});

#ui-datepicker-div { 
 
    width: 90%; !important; 
 
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 

 
<p>Date: <input type="text" id="datepicker"></p> 
 
<p>Date: <input type="text" id="zzz"></p>

Итак, я предлагаю использовать первый, потому что в этом случае вы можете установить ширину конкретного DatePicker, не для всех.

Всякий раз, когда вы открываете datepicker, в документ добавляется новый элемент div. С JQuery 1,12 идентификатор этой панели всегда имеет имя «щ-Datepicker-DIV»