奇怪的问题与输入元素

所以我想出了一个非常'哈克'的方式在我的输入框中添加一个图标。但是，无论输入框的宽度如何，输入框中的部分值都会被截断。我不知道可能是什么原因造成的。奇怪的问题与输入元素

我的代码：

<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

奇怪的问题与输入元素

回答

相关问题