応答性jquery UI Datepicker

Question

Jquery Datepickerを応答性にする方法はありますか？小さいスクリーンでは、カレンダーの背景がサイズ変更されますが、数字はサイズ変更されないためです。 http://hpics.li/2286798 私はGoogleで似た問題が見つかりましたが、あなたがこのような効果を持っている理由私にはわからない何か良い解決策

Answer 1

を見つけられませんでした：
は、ここで問題です。あなたのコードをお願いします。 私のソリューションを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は助けることができます見て

Answer 2

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

？