jQuery UI的日期選擇器顯示在底部在移動設備

請參閱網頁鏈接：http://checkmyryde.com/rent.php jQuery UI的日期選擇器顯示在底部在移動設備

我已經使用jQuery UI的日期選擇器，它工作正常與桌面視圖。但是，如果打開移動設備中的頁面，日期選擇器位於頁面底部。這可能是什麼問題？任何想法？由於

$(document).ready(function() { 
 

 

 
$('.date-picker').datepicker({ 
 
    minDate: 0,dateFormat: 'yy-mm-dd' 
 
}); 
 

 
});

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.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> 
 
    
 

 

 
<p>Date: <input type="text" id="datepicker" class="date-picker"></p>

來源

2017-04-07 Vishnu

你能分享你的相關代碼嗎？日期選擇器的css和html。 –

@MihaiT是的.... – Vishnu

無需任何代碼的工作，我的猜測認爲datepicker calendar與top:100%相對於整個行絕對定位。因此，當行中的項目在另一個下面時，日期選擇器仍然相對於該行定位。

您需要將其設置爲相對於其輸入，或者使用jQuery將其設置爲與輸入頂部位置+輸入高度相等的頂部位置。

編輯：添加position:relative到p或container持有的date-picker input

來源

2017-04-07 10:47:06

添加片段代碼 – Vishnu

它是在所有寬度的桌面瀏覽器工作正常，但只發生在移動設備... – Vishnu

我明白。但我無法在移動設備上覆制您的問題，請使用您的代碼嘗試：將'position：relative'添加到包含'date-picker input'的'p'或'container' –

在jQuery自動檢測屏幕，無需在jQuery的UI修改。如果您需要覆蓋，則仍然可以在下面的鏈接中找到解決方案。 click here to view original issue

(function() { 
    var orig = jQuery.datepicker._showDatepicker; 
    jQuery.datepicker._showDatepicker = function(input){ 
     orig.apply(this, arguments); 
     $('#ui-datepicker-div').css('top', '100px'); 
    } 
});

你可以根據自己的要求來改變top值。

來源

2017-04-07 10:54:11 Parth

jQuery UI的日期選擇器顯示在底部在移動設備

回答

相關問題