奇怪的問題與輸入元素

所以我想出了一個非常'哈克'的方式在我的輸入框中添加一個圖標。但是，無論輸入框的寬度如何，輸入框中的部分值都會被截斷。我不知道可能是什麼原因造成的。奇怪的問題與輸入元素

我的代碼：

<div class="pull-right"> 
    <div id="date_range" class="form-control" style="background: #fff; cursor: pointer; border: 1px solid #ccc; width: 100%"> 
     <i class="fa fa-calendar"></i>&nbsp; 
     <span></span> <b class="caret"></b><input name="daterange" style="border: none"> 
    </div> 
</div>

我試圖增加div的寬度我補充說：

<div class="pull-right" style="width: 300px">

它增加了div的寬度，但該值仍CUTT off：

來源

2016-06-07 newkid101

您必須增加輸入的寬度而不是div。

嘗試：

<input name="daterange" style="border: none;width: 95%;">

讓我知道這是否有助於

來源

2016-06-07 22:41:47 IsraGab

yup解決了它。謝謝。我正在嘗試自動更早，這是搞砸了更多 – newkid101

很酷，所以請接受帶有複選標記的答案，它可以幫助其他人，它會給我很好的反饋:) – IsraGab

@ newkid101，順便說一句，@Kld是對的，正確的用bootstrap做這件事的方法是使用'input-group' – IsraGab

border:none和width: 100%它們都不會以;結尾，這可能會導致您遇到的問題。但是我沒有測試過，看看是否是這樣。

試試這個;

<div class="pull-right"> 
    <div id="date_range" class="form-control" style="background: #fff; cursor: pointer; border: 1px solid #ccc; width: 100%;"> 
     <i class="fa fa-calendar"></i>&nbsp; 
     <span></span> <b class="caret"></b><input name="daterange" style="border: none; width:100%;"> 
    </div> 
</div>

來源

2016-06-07 22:37:57

沒什麼區別 – newkid101

現在嘗試已經編輯我的答案。 –

做，在引導是使用輸入組

<div class="input-group"> 
     <div class="input-group-addon"> 
      <span class="fa fa-calendar"></span> 
      <b class="caret"></b> 
     </div> 
     <input type="text" name="daterange" class="form-control" /> 
    </div>

來源

2016-06-07 22:48:40 Kld

這個問題似乎是最好的方法因爲你的輸入字段有固定的寬度。給它一個像170px或類似的em寬度的最小寬度。同時檢查容器元素上的填充右邊。

這是一個小提琴。 https://jsfiddle.net/zjxborpt/

HTML

<div class="pull-right"> 
    <div id="date_range" class="form-control"> 
     <i class="fa fa-calendar">ICON</i>&nbsp; 
     <span></span> <b class="caret">^</b><input type="daterange" name="daterange" class="form-control" style="border: none" value="2016-02-25 - 2016-03-07"> 
    </div> 
</div>

CSS

#date_range { 
    background: #fff; 
    cursor: pointer; 
    border: 1px solid #ccc; 
    padding: 10px; 
    display: inline-block; 
} 
#date_range i { width: 40px; display: inline-block; } 
#date_range .caret { width: 10px; 
    display: inline-block; 
    transform: rotate(180deg); 
    margin-right: 10px; 
    position: relative; 
    top: -5px; 
} 

#date_range input { min-width: 170px; display: inline-block; }

來源

2016-06-07 22:54:00 TxRegex

奇怪的問題與輸入元素

回答

相關問題