Jquery Datepickerを応答性にする方法はありますか?小さいスクリーンでは、カレンダーの背景がサイズ変更されますが、数字はサイズ変更されないためです。 http://hpics.li/2286798 私はGoogleで似た問題が見つかりましたが、あなたがこのような効果を持っている理由私にはわからない何か良い解決策応答性jquery UI Datepicker
0
A
答えて
0
を見つけられませんでした:
は、ここで問題です。あなたのコードをお願いします。 私のソリューションをjsFiddleにチェックすることができます。
.ui-datepicker-calendar {
width: 100%;
background-color: red;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
<div style="width: 100%">
<p>Date: <input type="text" id="datepicker" style="width: 10px"></p>
</div>
あなたは、ブートストラップを適用し、それはいいはずDatePickerのタグ.col-4
を設定することがあります。
datepickerのデフォルト設定を上書きする可能性があるため、cssファイルも参照してください。たぶん、CSSは助けることができます見て
0
.ui-datepicker {
width: 17%;
padding: .2em .2em 0;
display: none;
}
.ui-datepicker-calendar {
width: 100%;
background-color: red;
}
.ui-datepicker .ui-datepicker-header {
position: relative;
padding: .2em 0;
width:100%;
}
.ui-datepicker-header{
width:100%;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
position: absolute;
top: 2px;
width: 1.8em;
height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
left: 2px;
}
.ui-datepicker .ui-datepicker-next {
right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
right: 1px;
}
.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;
}
.ui-datepicker .ui-datepicker-title {
margin: 0 2.3em;
line-height: 1.8em;
text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
font-size: 1em;
margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
width: 45%;
}
.ui-datepicker table {
width: 100%;
font-size: .9em;
border-collapse: collapse;
margin: 0 0 .4em;
}
.ui-datepicker th {
padding: .7em .3em;
text-align: center;
font-weight: bold;
border: 0;
}
.ui-datepicker td {
border: 0;
padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
display: block;
padding: .2em;
text-align: right;
text-decoration: none;
}
.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;
}
.ui-datepicker .ui-datepicker-buttonpane button {
float: right;
margin: .5em .2em .4em;
cursor: pointer;
padding: .2em .6em .3em .6em;
width: auto;
overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
float: left;
}
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
width: 95%;
margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
clear: left;
}
.ui-datepicker-row-break {
clear: both;
width: 100%;
font-size: 0;
}
/* RTL support */
.ui-datepicker-rtl {
direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
right: 2px;
left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
left: 2px;
right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
right: 1px;
left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
left: 1px;
right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
border-right-width: 0;
border-left-width: 1px;
}
?
関連する問題
- 1. UIの応答性とjavascript
- 2. jQuery UI datepicker binding
- 3. ajax datepicker jquery ui
- 4. Jquery UI - Datepicker onChangeMonthYear
- 5. jQuery UI datepicker maxdate
- 6. Jquery datepicker UI
- 7. jquery ui datepicker dateformat
- 8. aurelia-ui-virtualizationによる応答性
- 9. jquery UI datepickerリセット日
- 10. JQuery UI datepickerのローカリゼーション
- 11. jQuery UI DatePickerでJeditable
- 12. jquery ui datepickerでイオニックポップアップ
- 13. jquery ui datepicker close function
- 14. シンプルマテリアライズUI応答サイドメニュー
- 15. SOAP UIの応答
- 16. 応答jqueryの粘着性の問題
- 17. jQuery UI datepicker cssのカスタマイズ
- 18. jquery ui datepicker日付形式
- 19. html.TextBoxコントロールのjQuery UI Datepicker
- 20. jQuery UI datepicker年齢確認
- 21. jquery ui datepickerエラーon beforeShowDay
- 22. jquery-ui datepickerでknockoutjsデータバインド
- 23. JQuery UI Datepicker with Time Plugin
- 24. jquery-ui datepickerの問題
- 25. Jquery UI datepickerインラインgetDate on select
- 26. jQuery UI Datepicker - setDate not working
- 27. jQuery UI Datepicker - defaultDateとyearRange
- 28. jQuery UI Datepicker - 戻り値
- 29. jquery-ui datepicker change z-index
- 30. jQuery-UI Datepicker:ドラッグ可能?
奇妙なこと:/ JQUERY UIで与えられたCSSを使用していて、その中にDatepicker-calendarはありませんでした。 100%の幅を問題の固定部分で追加すると、次の月と前の月(カレンダーの上にある2つの矢印)がお互いにほぼ上になります。私はdatepicker-headerとdatepickerを次に修正しようとしましたが、解決策を見つけることができません。アイデアはありますか? –
私は、.ui-datepicker .ui-datepicker-prevを変更する必要があることを知りました。 .ui-datepicker .ui-datepicker-next width。それは私がそれの代わりに何を置くことができる1.8emですか? 100%は通常の画面サイズで奇妙に見えることがあります –
おそらくメディアクエリ? –