KendoUI日期選擇器輸入字段顯示問題

希望我在這裏提供的內容足以幫助我解決顯示問題。KendoUI日期選擇器輸入字段顯示問題

你可以在行動看到這一點：http://dev.skoovy.com 用戶名： [email protected] 密碼： test123

這是在的頂部形態頁。這是一個正在開發的網站。

當我建立一個輸入字段，以提供一個datepicker，它改變輸入字段包含旁邊的日曆圖標此添加區域。我找不到爲什麼會發生這種情況。

下面是它用datepicker初始化的樣子。用紅筆突出顯示的區域是我正在嘗試解決的問題。

input fields with datepicker initialized

而且，這裏是它lookslike沒有日期選擇器初始化。

enter image description here

這裏是來自調試器窗格中鉻（通過元件選擇器）作爲複製的HTML

<div class="when_range_input" style="display: block;"> 
Start: <span class="k-widget k-datepicker k-header" style=""><span class="k-picker-wrap k-state-default"><input type="text" id="when_range_start" name="wv_drs" value="" data-role="datepicker" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-owns="when_range_start_dateview" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is null" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="when_range_start_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span> 
&nbsp;End: <span class="k-widget k-datepicker k-header" style=""><span class="k-picker-wrap k-state-default"><input type="text" id="when_range_end" name="wv_dre" value="" data-role="datepicker" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-owns="when_range_end_dateview" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is null" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="when_range_end_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span> 
</div>

這裏是我使用的CSS：

.when_range_input { 
    display:none; 
    position:absolute; 
    width:350px; 
    /** margin-left:320px; **/ 
    border-color:#ffcc00; 
    padding:5px; 
    z-index:9999; 
    font-size:11px; 
    -webkit-box-shadow: 3px 3px 10px rgba(50, 50, 50, 0.55); 
    -moz-box-shadow: 3px 3px 10px rgba(50, 50, 50, 0.55); 
    box-shadow: 3px 3px 10px rgba(50, 50, 50, 0.55); 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    background-color:#ffffff; 
} 

.when_range_input input[type="text"] { 
    background-color: #fff; 
    border-color: #e2e2e2; 
    border-style: solid; 
    border-width: 1px; 
    font-size: 11px; 
    color: #b8b8b8; 
    padding: 2px 1px 2px 1px; 
    line-height: 15px; 
    height: 20px; 
}

來源

2014-01-23 kambythet

PLease提供給我們一個演示鏈接 –

我已更新該帖子以包含鏈接並登錄到dev站點。 – kambythet

你應該改變輸入的最大寬度f ield

.headersearch-flex-container .searchfld.flex-item:nth-child(2) input { 
    width: 90px; 
    max-width: 110px; 
    min-width: 80px; 
}

來源

2014-01-23 18:57:47

太棒了！非常感謝。 – kambythet

KendoUI日期選擇器輸入字段顯示問題

回答

相關問題