在製表符內容框中切掉引導程序datetimepicker

我正在使用eonasdan-bootstrap-datetimepicker。請先在這裏看到圖片：在製表符內容框中切掉引導程序datetimepicker

datetimepicker位於Bootstrap標籤內容控件中，並被上邊距切斷。

而不BR代碼
BR代碼的層截圖添加填充，從而允許充分的DateTimePicker揭示出來。

截圖BR代碼的包括

這裏的形式爲不低於形式的基團的BR代碼的標記：

<form class="form-horizontal mt-sm" action='' method="POST"> 
    <fieldset>  
     <div class="form-group"> 
      <label for="expiration-date" class="control-label col-md-3">Expiration Date</label> 
      <div class="col-md-8"> 
       <div class="col-md-10"><input type="text" id="expiration-date" class="form-control"></div> 
      </div> 
     </div> 
    </fieldset> 
</form>

下面是腳本：

<script src="/lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script> 
<script src="/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script> 
<script src="/lib/select2/select2.min.js"></script> 
<script src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script> 
<link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />

來源

2016-05-17 omrakhur

請加小提琴。 – maverickosama92

耶小提琴會更好地發揮，但你可以嘗試Z指數以及日期選擇器。 –

標籤容器可能具有'position：relative'和'overflow：hidden'。不知怎的，日期選擇器在該div中生成而不是生成到'body'。再次，小提琴將是偉大的;） –

問題是，您的標籤的高於日期選取器UI。所以要解決這個問題，你必須增加日期選擇器UI的z-index。

.datepicker { 
    z-index: 1151; 
}

確保您更改選擇是所需.datepicker元素更加具體。還要確保這種風格優先。在我的情況下，我不得不使用z-index: 1151 !important;但我不推薦它，除非你能在沒有!important的情況下得到這個工作。

來源

2016-05-17 13:28:16

爲什麼'1151'位？ – omrakhur

@omrakhur完全不確定數字但是這是對我有用。我想早就回來了，當我遇到類似的問題時，我從其他地方拿走了這個號碼。這是否適合你？ –

這不起作用。我已經嘗試將輸入內的樣式，以及在div內，但仍然沒有運氣。我也增加了指數到100000，但不起作用 – omrakhur

在製表符內容框中切掉引導程序datetimepicker

回答

相關問題