Bootstrap Material设计浮动标签与输入文本重叠

Question

我正在使用自举材料设计，当文本预先填充时，我的标签与输入文本重叠..（参见下面的截图）。有没有办法阻止标签重叠？

我的代码：

<div className="modal-body">
    <div className="md-form">
        <input type="text" className="form-control" defaultValue={ project.name } ref="name"/>
        <label>Name</label>
    </div>
    <div className="md-form">
        <input type="text" className="form-control" defaultValue={ project.description } ref="description"/>
        <label>Description</label>
    </div>
    <div className="md-form">
        <input type="text" className="form-control" defaultValue={ project.slug } ref="slug"/>
        <label>Slug</label>
    </div>
</div>

提前致谢！

Answer 1

<强>更新

当输入处于活动状态或聚焦状态时，

translateY()值将更改标签的位置。您可以操纵其值来设置所需的标签位置，也可以更改字体大小值。

HTML：

<div className="md-form">            
        <input type="text" className="form-control" defaultValue={ project.name } ref="name"/>    
        <label>Name</label>        
</div>

CSS：

.md-form label.active {
    font-size: 0.8rem;
    transform: translateY(-140%);
}

我希望这有助于你

Answer 2

如果您使用的是Angular2，则无需创建自定义指令即可完成此操作。在标签上做这样的事情。

<label [class.active]="name && name.length > 0">Some Label</label>

Answer 3

我有相同的问题，并通过在元素上使用重点突出的类来解决。如果您使用的是vuejs，则可以使用内联语句检查值是否已填充，然后调用focused类（使用v-bind:class），该类将为元素设置样式。

类似这样的东西：

<div class="form-line"  v-bind:class="[name != null ? 'focused' : '']">
     <input type="text" class="form-control" v-model="name">
     <label class="form-label" >Name</label>
</div>

P.S。这也可以用于具有适当语法的其他框架。

Answer 4

<!-- Material input -->
<div class="md-form">
  <input value="John Doe" type="text" id="myid" class="form-control">
  <label for="myid">Example label</label>
</div>

来源：https://mdbootstrap.com/docs/jquery/forms/inputs/